ModelDialog JavaScript模态对话框类代码


Posted in Javascript onApril 17, 2011

/**
* JavaScript ModelDialog v0.1
*
* new ModelDialog({
* caption 标题 '对话框标题'(默认)
* template 主体内容 ''(默认)
* dialogCls 对话框className 'md-dialog'(默认)
* headCls 头部className 'md-head'(默认)
* btnCloseCls 关闭按钮className 'md-close'(默认)
* bodyCls 主体className 'md-body'(默认)
* shadowBg 遮盖层背景色 'gray'(默认)
* shadowOpy 遮盖层透明的 0.2(默认)
* dragable 是否可拖拽 true(默认)
* dragInWin 是否仅在窗口内拖动 (true)默认 与area互斥
* area [minX,maxX,minY,maxY] 与dragInWin互斥
* });
*/

ModelDialog JavaScript模态对话框类代码


核心代码:
/** 
* JavaScript ModelDialog v0.4 
* Copyright (c) 2010 snandy 
* Blog: http://snandy.javaeye.com/ 
* QQ群: 34580561 
* Date: 2010-09-08 
* 
* 
* new ModelDialog({ 
* caption 标题 '对话框标题'(默认) 
* template 主体内容 ''(默认) 
* dialogCls 对话框className 'md-dialog'(默认) 
* headCls 头部className 'md-head'(默认) 
* btnCloseCls 关闭按钮className 'md-close'(默认) 
* bodyCls 主体className 'md-body'(默认) 
* shadowBg 遮盖层背景色 'gray'(默认) 
* shadowOpy 遮盖层透明的 0.2(默认) 
* dragable 是否可拖拽 true(默认) 
* dragInWin 是否仅在窗口内拖动 (true)默认 与area互斥 
* area [minX,maxX,minY,maxY] 与dragInWin互斥 
* }); 
*/ 
ModelDialog = 
function(){ 
var px = 'px'; 
var isIE = /msie/.test(navigator.userAgent.toLowerCase()); function getViewSize(){ 
return {w: window['innerWidth'] || document.documentElement.clientWidth, 
h: window['innerHeight'] || document.documentElement.clientHeight} 
} 
function getFullSize(){ 
var w = Math.max(document.documentElement.clientWidth ,document.body.clientWidth) + Math.max(document.documentElement.scrollLeft, document.body.scrollLeft); 
var h = Math.max(document.documentElement.clientHeight,document.body.clientHeight) + Math.max(document.documentElement.scrollTop, document.body.scrollTop); 
w = Math.max(document.documentElement.scrollWidth,w); 
h = Math.max(document.documentElement.scrollHeight,h); 
return {w:w,h:h}; 
} 
function $(tag){ 
return new $.prototype.init(tag); 
} 
$.prototype = { 
init : function(tag){ 
this[0] = document.createElement(tag); 
return this; 
}, 
setCls : function(cls){ 
this[0].className = cls; 
return this; 
}, 
setSty : function(name,val){ 
name=='opacity' ? 
isIE ? 
this[0].style.filter = 'Alpha(Opacity=' + val*100 + ')' : 
this[0].style.opacity = val : 
this[0].style[name] = val; 
return this; 
}, 
css : function(str){ 
this[0].style.cssText = str; 
return this; 
}, 
html : function(str){ 
this[0].innerHTML = str; 
return this; 
} 
} 
$.prototype.init.prototype = $.prototype; 
function ModelDialog(opt){ 
this.dialogCls = opt.dialogCls || 'md-dialog'; 
this.headCls = opt.headCls || 'md-head'; 
this.btnCloseCls = opt.btnCloseCls || 'md-close'; 
this.bodyCls = opt.bodyCls || 'md-body'; 
this.shadowBg = opt.shadowBg || 'gray'; 
this.shadowOpy = opt.shadowOpy || '0.2'; 
this.caption = opt.caption || "对话框标题"; 
this.template = opt.template || ''; 
this.dragable = opt.dragable != false; 
this.dragInWin = opt.dragInWin != false; 
this.area = opt.area; 
this.dialog = null; 
this.head = null; 
this.label = null; 
this.btnClose = null; 
this.body = null; 
this.shadow = null; 
this.init(); 
} 
ModelDialog.prototype = { 
init : function(){ 
var _this = this; 
this.dialog = $('div').setCls(this.dialogCls).css('position:absolute;z-index:100;')[0]; 
this.head = $('div').setCls(this.headCls)[0]; 
this.label = $('label').html(this.caption)[0]; 
this.btnClose = $('div').setCls(this.btnCloseCls)[0]; 
this.on(this.btnClose,'click',function(){ 
_this.onClose(); 
}); 
this.head.appendChild(this.label); 
this.head.appendChild(this.btnClose); 
this.body = $('div').setCls(this.bodyCls)[0]; 
this.setContent(this.template); 
this.dialog.appendChild(this.head); 
this.dialog.appendChild(this.body); 
this.createShadow(); 
document.body.appendChild(this.shadow); 
document.body.appendChild(this.dialog); 
this.moveToCenter(); 
// 计算拖拽范围 
// 标准模式下:clientWidth=width+padding;offsetWidth=width+padding+border 
if(this.dragable){ 
if(this.dragInWin){ 
var maxX = getViewSize().w - this.dialog.offsetWidth; 
var maxY = getViewSize().h - this.dialog.offsetHeight; 
this.dragdrop(this.dialog,{ 
bridge : this.head, 
area : [0,maxX,0,maxY] 
}); 
return; 
} 
if(this.area){ 
this.dragdrop(this.dialog,{ 
bridge : this.head, 
area : this.area 
}); 
return; 
} 
this.dragdrop(this.dialog,{ 
bridge : this.head 
}); 
} 
}, 
destroy : function(){ 
this.dialog = null; 
this.head = null; 
this.label = null; 
this.btnClose = null; 
this.body = null; 
this.shadow = null; 
}, 
createShadow : function(){ 
var str = 'position:absolute;left:0px;top:0px;z-index:1' + 
';width:' + getFullSize().w + px + 
';height:' + getFullSize().h + px + 
';background:' + this.shadowBg + 
';opacity:' + this.shadowOpy + 
';filter:Alpha(Opacity=' + this.shadowOpy*100 + ');'; 
var _this = this; 
this.shadow = $("div").setCls('md-shadow').css(str)[0]; 
this.on(window,'resize',function(){ 
_this.shadow.style.width = getFullSize().w + px; 
_this.shadow.style.height = getFullSize().h + px; 
_this.moveToCenter(); 
}); 
}, 
moveTo : function(x, y){ 
this.dialog.style.left = x + px; 
this.dialog.style.top = y + px; 
}, 
moveToCenter : function(){ 
var size = getViewSize(); 
var x = (size.w-50)/2 - (this.dialog.clientWidth-50)/2; 
var y = (size.h- 50)/2 - (this.dialog.clientHeight-50)/2 + document.documentElement.scrollTop; 
this.moveTo(x, y); 
}, 
setCaption : function(v){ 
this.caption = v; 
this.label.innerHTML = v; 
}, 
setContent : function(str){ 
this.template = str; 
this.body.innerHTML = str; 
}, 
onClose : function(){ 
document.body.removeChild(this.dialog); 
document.body.removeChild(this.shadow); 
if(this['onbi']){ 
this.onbi(); 
} 
this.destroy(); 
}, 
on : function(el, type, fn){ 
el.addEventListener ? 
el.addEventListener(type, fn, false) : 
el.attachEvent ? 
el.attachEvent("on" + type, fn) : 
el['on'+type] = fn; 
}, 
un : function(el,type,fn){ 
el.removeEventListener ? 
el.removeEventListener(type, fn, false) : 
el.detachEvent ? 
el.detachEvent("on" + type, fn) : 
el['on'+type] = null; 
}, 
dragdrop : function(){ 
return function(el,opt){ 
var _this=this, ele, diffX, diffY, dragX=true,dragY=true, minX, maxX, minY, maxY, bridge; 
ele = el; 
opt && opt.dragX===false && (dragX=false); 
opt && opt.dragY===false && (dragY=false); 
opt && opt.area && typeof opt.area[0]==='number' && (minX=opt.area[0]); 
opt && opt.area && typeof opt.area[1]==='number' && (maxX=opt.area[1]); 
opt && opt.area && typeof opt.area[2]==='number' && (minY=opt.area[2]); 
opt && opt.area && typeof opt.area[3]==='number' && (maxY=opt.area[3]); 
opt && opt.bridge && (bridge=opt.bridge); 
ele.style.position = 'absolute'; 
bridge ? 
this.on(bridge,'mousedown',mousedown) : 
this.on(ele,'mousedown',mousedown); 
function mousedown(e){ 
e = e || window.event; 
ele.style.cursor = 'pointer'; 
if(ele.setCapture){//IE 
_this.on(ele, "losecapture", mouseup); 
ele.setCapture(); 
e.cancelBubble = true; //IE 
}else if(window.captureEvents){//标准DOM 
e.stopPropagation(); 
_this.on(window, "blur", mouseup); 
e.preventDefault(); 
} 
_x = e.clientX; 
_y = e.clientY; 
diffX = e.clientX - ele.offsetLeft; 
diffY = e.clientY - ele.offsetTop; 
_this.on(document,'mousemove',mousemove); 
_this.on(document,'mouseup',mouseup); 
} 
function mousemove(e){ 
e = e || window.event; 
var moveX = e.clientX - diffX, 
moveY = e.clientY - diffY; 
moveX < minX && (moveX = minX); // left 最小值 
moveX > maxX && (moveX = maxX); // left 最大值 
moveY < minY && (moveY = minY); // top 最小值 
moveY > maxY && (moveY = maxY); // top 最大值 
dragX && (ele.style.left = moveX + 'px'); 
dragY && (ele.style.top = moveY + 'px'); 
} 
function mouseup(e){ 
ele.style.cursor = 'default'; 
_this.un(document,'mousemove',mousemove); 
_this.un(document,'mouseup',mouseup); 
if(ele.releaseCapture){//IE 
_this.un(ele, "losecapture", mouseup); 
ele.releaseCapture(); 
} 
if(window.releaseEvents){//标准DOM 
_this.un(window, "blur", mouseup); 
} 
} 
} 
}() 
} 
return ModelDialog; 
}();

演示地址 http://demo.3water.com/js/2011/ModelDialog/index.html
打包下载地址 https://3water.com/jiaoben/35245.html
Javascript 相关文章推荐
js removeChild 障眼法 可能出现的错误
Oct 06 Javascript
使用jQuery Ajax功能时需要注意的一个问题(内存溢出)
May 30 Javascript
让你的博客飘雪花超出屏幕依然看得见
Jan 04 Javascript
复制js对象方法(详解)
Jul 08 Javascript
关于Javascript加载执行优化的研究报告
Dec 16 Javascript
js实现ctrl+v粘贴上传图片(兼容chrome、firefox、ie11)
Mar 09 Javascript
jQuery动态创建元素以及追加节点的实现方法
Oct 20 Javascript
jQuery UI Draggable + Sortable 结合使用(实例讲解)
Sep 07 jQuery
vue中的模态对话框组件实现过程
May 01 Javascript
详解创建自定义的Angular Schematics
Jun 06 Javascript
Vue下拉框回显并默认选中随机问题
Sep 06 Javascript
小程序点赞收藏功能的实现代码示例
Sep 07 Javascript
JavaScript中的isXX系列是否继续使用的分析
Apr 16 #Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
Apr 16 #Javascript
表单JS弹出填写提示效果代码
Apr 16 #Javascript
纯JAVASCRIPT图表动画插件Highcharts Examples
Apr 16 #Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
Apr 16 #Javascript
javascript 弹出窗口中是否显示地址栏的实现代码
Apr 14 #Javascript
js网页侧边随页面滚动广告效果实现
Apr 14 #Javascript
You might like
Zend公司全球首推PHP认证
2006/10/09 PHP
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
PHP set_error_handler()函数使用详解(示例)
2013/11/12 PHP
使用PHPExcel操作Excel用法实例分析
2015/03/26 PHP
thinkPHP5.0框架验证码调用及点击图片刷新简单实现方法
2018/09/07 PHP
父窗口获取弹出子窗口文本框的值
2006/06/27 Javascript
pjblog修改技巧汇总
2007/03/12 Javascript
node在两个div之间移动,用ztree实现
2013/03/06 Javascript
JS滚轮事件onmousewheel使用介绍
2013/11/01 Javascript
使用typeof方法判断undefined类型
2014/09/09 Javascript
jQuery寻找n以内完全数的方法
2015/06/24 Javascript
适用于手机端的jQuery图片滑块动画
2016/12/09 Javascript
JS中Array数组学习总结
2017/01/18 Javascript
如何在Angular2中使用jQuery及其插件的方法
2017/02/09 Javascript
纯js仿淘宝京东商品放大镜功能
2017/03/02 Javascript
layui表格实现代码
2017/05/20 Javascript
Angular 4 依赖注入学习教程之FactoryProvider的使用(四)
2017/06/04 Javascript
jQuery实现每隔一段时间自动更换样式的方法分析
2018/05/03 jQuery
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
vue使用laydate时间插件的方法
2018/11/14 Javascript
vue百度地图 + 定位的详解
2019/05/13 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
2019/07/18 Javascript
微信小程序中button去除默认的边框实例代码
2019/08/01 Javascript
Vue中nprogress页面加载进度条的方法实现
2020/11/13 Javascript
Selenium执行JavaScript脚本的方法示例
2020/12/31 Javascript
Python基于回溯法子集树模板实现8皇后问题
2017/09/01 Python
Python文件的读写和异常代码示例
2017/10/31 Python
python多线程抽象编程模型详解
2019/03/20 Python
pytorch中tensor.expand()和tensor.expand_as()函数详解
2019/12/27 Python
使用pytorch完成kaggle猫狗图像识别方式
2020/01/10 Python
Tensorflow中k.gradients()和tf.stop_gradient()用法说明
2020/06/10 Python
北京泡泡网网络有限公司.net面试题
2012/07/17 面试题
大学辅导员事迹材料
2014/02/05 职场文书
我的小天地教学反思
2014/04/30 职场文书
实习生辞职信范文
2015/03/02 职场文书
PostgreSQL并行计算算法及参数强制并行度设置方法
2022/04/07 PostgreSQL