var basic = {}; /** * 对话框内 关闭按钮调用 , 作用关闭对话框 */ basic.closeDialog = function (){ var dialog = document.getElementById('dialog'); var zhezhao = document.getElementById('zhezhao'); dialog.parentNode.removeChild(dialog ); zhezhao.parentNode.removeChild(zhezhao ); } /** * ajax 加载的 弹出层 * ajax 的形式加载所需要的对话框 * width :弹出框的 宽度 * height :弹出框的 高度 */ basic.tanchuCeng = function(url ,width ,height ){ basic.showBackground(); $.ajax({ type: "POST", url: url , success: function(pageHtml ){ //创建对话框 var diaObj = basic.createDialog(pageHtml ,width ,height); document.body.appendChild( diaObj ); //添加动画 var pos = basic.getViewData(); var h = (pos.height-height)/2+pos.scrollTop ; var dialog = document.getElementById('dialog'); basic.scrollDialog(dialog, h ); } }); } /** * 本页面 弹出层 * 对话框在页面上 * width :弹出框的 宽度 * height :弹出框的 高度 */ basic.tanchuCengLocal = function( dialogId ,width ,height ){ basic.showBackground(); //取出对话框副本的html代码 var diaLogHtml = $('#'+dialogId ).clone().show().htmlCode(); //创建对话框 var diaObj = basic.createDialog( diaLogHtml ,width ,height); document.body.appendChild( diaObj ); //添加动画 var pos = basic.getViewData(); var h = (pos.height-height)/2+pos.scrollTop ; var dialog = document.getElementById('dialog'); basic.scrollDialog(dialog, h ); } /** * 创建一个对话框 * pageHtml 是对话框的html * width 对话框的宽度 * heigth 对话框的高度 这两参数决定对话框的显示位置是否正确 */ basic.createDialog= function ( pageHtml, width ,height ){ var pos = basic.getViewData(); var dialogDiv = document.createElement('div'); dialogDiv.setAttribute('id','dialog'); var w = ((pos.width-width)/2 ); //40 滚动条的宽度 var h = (pos.height-height)/2+pos.scrollTop ; dialogDiv.style.cssText = "position: absolute;z-index:110;left:"+w+"px;top:0px;background:red"; dialogDiv.innerHTML = pageHtml ; return dialogDiv; } //显示背景 透明层 basic.showBackground= function (){ var pos = basic.getViewData(); var bj = document.createElement('div'); bj.setAttribute('id','zhezhao'); //alert(pos.scrollTop ); bj.style.cssText="position: absolute;height:"+ (pos.scrollHeight )+"px;width:"+pos.width+"px;z-index:100;background:#fff;left:0px;top:0px"; if(!+"\v1"){ bj.style.filter="alpha(opacity=67)"; }else{ bj.style.cssText +="background:rgba(164,173,183,.65)"; } document.body.appendChild(bj); } //得到屏幕的宽高 ,以及位置 basic.getViewData = function (){ var position = {}; //滚动条的顶部 position.scrollTop = window.pageYOffset //用于FF || document.documentElement.scrollTop // 有w3c说明的 || document.body.scrollTop //w3c 为0 || 0; var scrollHeight1 = document.documentElement.scrollHeight // 有w3c说明的 || document.body.scrollHeight //w3c 为0 || 0; //整个页面的高度 position.scrollHeight = Math.max(scrollHeight1,position.scrollTop ); //滚动条左边位置 position.scrollLeft = window.pageXOffset || document.documentElement.scrollLeft || document.body.scrollLeft || 0; //页面宽度 position.width = document.documentElement.clientWidth || document.body.clientWidth || window.innerWidth || 0; //页面高度 position.height = document.documentElement.clientHeight || document.body.clientHeight || window.innerHeight ; // 兼容 opera return position; } //对话框滚动的动画 basic.scrollDialog= function(moveObj , maxTop){ //moveObj.style.top = "0px" ; var speed = 2 ; var top; setTimeout(function(){ //speed = speed*1.5; top = Math.max(parseFloat( moveObj.style.top )+ speed, maxTop); moveObj.style.top = top+"px"; if(top>maxTop){ return ; }else{ setTimeout(arguments.callee,10); } },10); } //扩展 jquery ,获取jquery对象对应的html $.extend($.prototype, { htmlCode:function(){ var div = $('<div>'); this.appendTo(div); return div.html(); } });
使用
var url = "tanchu/弹出框.shtml";
basic.tanchuCeng(url,493,134 );
basic.showBackground();
相关推荐
4.ajax加载远程页面弹出框 5.ajax加载自定义页面弹出框 三、使用方法 bootstrap3-dialog的demo中已有很详细的介绍,但对于初学者来说是个麻烦,还要一个一个方法和注释去看。但我对这些常用的方法进行了新的
空祖家的对话框2.0拥有提供最简单的调用方式以实现消息框、选择框、输入框、等待提示、警告提示、完成提示、错误提示等弹出样式。以下是目前包含的所有对话框样式预览图: 试用版可以前往 http://fir.im/kDialog ...
对Dialog的封装,理解封装的概念。希望对大家有所帮助
一款安卓弹框框架的封装,适配各种格式和数据
各种简单样式的弹出框 这是一个基于 AlertDialog 和 Dialog 这两个类封装的多种弹出框样式,其中提供各种简单样式的弹出框使用说明。同时也可自定义弹出框。
Dialog弹出框自定义、button圆角阴影设置、弹出框圆角设置、弹出框内容显示动态传入、Dialog居中显示等
仿QQ底部弹出框封装的良好,代码注释详细,易于理解与学习,在测试中的调用简单明了,如果项目中有需求可直接用在项目中运用
就好比进度框,Toast框,弹出框,确认框…这些基本的东西都在AndBase的AbActivity封装好了…我们只需要传递参数调用其中内部的方法就可以完成这些视图的创建…无论是进度条的调用,还是Toast框,还是弹出框,确认框...
对简单dialog的封装,就是简单弹出框,动态的设置,对项目中简单的dialog的复用,简单,方便。
'dialog-bar': dialogBar, }, <dialog></dialog> 点击一个按钮显示弹窗,并保证关闭弹窗后再次点击依旧显示 在弹窗组件中定义一个value值:v-model="sendVal",sendVal初始值为false。 在打开弹窗的方法中赋值: ...
看了jQueryUI Dialog的例子,效果还不错,就是用起来有点儿别扭,写出的代码有点拧巴,需要再封装一下!于是就有了下面这个简单的DialogHelper辅助类,因为这篇文章分享的重点是思路,所以目前版本的代码也还非常...
省市县地址三联动,完美封装成一个Dialog弹出框,下载即可用。省市县地址三联动,完美封装成一个Dialog弹出框,下载即可用。省市县地址三联动,完美封装成一个Dialog弹出框,下载即可用。
artDialog的JS源码,有一个弹出框的简单封装,以及运行实例
基于easyui的弹出框,为了方便使用稍微封装了下,有新增 修改用的,查看用的,有多步(上一步,下一步 跳过 )的,自定义按钮等等。分享下 赚点分
这里封装了常用的Toast,Loading, 提示框,对话框,单选对话框,列表对话框,底部弹出对话框等,这里做个记录,方便以后复用,使用起来也非常简单和方便。
主要介绍了Android 多种简单的弹出框样式设置代码的相关资料,这是一个基于AlertDialog和Dialog这两个类封装的多种弹出框样式,其中提供各种简单样式的弹出框使用说明。对android弹出框样式感兴趣的朋友一起看看吧
* 无限级弹出窗口 * Esc退出block弹出窗口 * 可拖动窗口 * 模态窗口 * 模态alert警告对话框 * 模态confirm对话框 * 页面局部模态 * 绑定按钮响应函数 * 弹出窗口加载iframe * 自定义背景样式 组件提供了...
多种简单的弹出框样式设置代,基于AlertDialog和Dialog这两个类封装的多种弹出框样式,其中提供各种简单样式的弹出框使用说明
最近在做小程序的登录,需要同时获取用户手机号和头像昵称等信息,但是小程序又不支持单个接口同时获取两种数据... <view class='dialog-body' slot=dialog-body> <view class='dialog-content'>申请获取你微信绑定