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 相关文章推荐
javascript 模式设计之工厂模式详细说明
May 10 Javascript
Javascript面向对象扩展库代码分享
Mar 27 Javascript
js中创建对象的几种方式示例介绍
Jan 26 Javascript
JavaScript中关键字 in 的使用方法详解
Oct 17 Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 Javascript
JS中用try catch对代码运行的性能影响分析
Dec 26 Javascript
JavaScript验证知识整理
Mar 24 Javascript
实例详解display:none与visible:hidden的区别
Mar 30 Javascript
解决JS内存泄露之js对象和dom对象互相引用问题
Jun 25 Javascript
vue mint-ui tabbar变组件使用
May 04 Javascript
微信小程序实现漂亮的弹窗效果
May 26 Javascript
vue学习笔记之作用域插槽实例分析
Feb 01 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
PHP_NETWORK_GETADDRESSES: GETADDRINFO FAILED问题解决办法
2014/05/04 PHP
WordPress中制作导航菜单的PHP核心方法讲解
2015/12/11 PHP
可以用来调试JavaScript错误的解决方案
2010/08/07 Javascript
jQuery选中select控件 无法设置selected的解决方法
2010/09/01 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
将中国标准时间转换成标准格式的代码
2014/03/20 Javascript
connect中间件session、cookie的使用方法分享
2014/06/17 Javascript
jQuery实现点击该行即可删除HTML表格行
2014/10/17 Javascript
jquery插件jSignature实现手动签名
2015/05/04 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
微信小程序 form组件详解
2016/10/25 Javascript
JavaScript ES6中CLASS的使用详解
2016/11/22 Javascript
js继承实现方法详解
2016/12/16 Javascript
解决layui前端框架 form表单,table表等内置控件不显示的问题
2018/08/19 Javascript
vue中 this.$set的用法详解
2019/09/06 Javascript
vue+elementUi 实现密码显示/隐藏+小图标变化功能
2020/01/18 Javascript
利用js实现简易红绿灯
2020/10/15 Javascript
Python使用openpyxl读写excel文件的方法
2017/06/30 Python
python实现日常记账本小程序
2018/03/10 Python
对python中assert、isinstance的用法详解
2019/11/27 Python
Python远程开发环境部署与调试过程图解
2019/12/09 Python
使用Django和Postgres进行全文搜索的实例代码
2020/02/13 Python
Django-imagekit的使用详解
2020/07/06 Python
python调用百度API实现人脸识别
2020/11/17 Python
高中生学习总结的自我评价范文
2013/10/13 职场文书
淘宝客服自我总结鉴定
2014/01/25 职场文书
企业领导对照检查材料
2014/08/20 职场文书
2015年公务员工作总结
2015/04/24 职场文书
平凡的世界读书笔记
2015/06/25 职场文书
煤矿安全生产管理协议书
2016/03/22 职场文书
小学生优秀作文范文(六篇)
2019/07/10 职场文书
成本低的5个创业项目:投资小、赚钱快
2019/08/20 职场文书
导游词之宁夏贺兰山岩画
2019/11/08 职场文书
读《工匠精神》有感:热爱工作,精益求精
2019/12/28 职场文书
MySQL中order by的使用详情
2021/11/17 MySQL
Tomcat 与 maven 的安装与使用教程
2022/06/16 Servers