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中的继承实例代码
Apr 27 Javascript
jqGrid增加时--判断开始日期与结束日期(实例解析)
Nov 08 Javascript
JqueryMobile动态生成listView并实现刷新的两种方法
Mar 05 Javascript
jQuery中scrollLeft()方法用法实例
Jan 16 Javascript
js实现仿京东2级菜单效果(带延时功能)
Aug 27 Javascript
js实现左侧网页tab滑动门效果代码
Sep 06 Javascript
bootstrap网页框架的使用方法
May 10 Javascript
Node.js模拟发起http请求从异步转同步的5种用法
Sep 26 Javascript
详解mpvue小程序中怎么引入iconfont字体图标
Oct 01 Javascript
vue项目中使用Svg的方法
Oct 24 Javascript
你了解vue3.0响应式数据怎么实现吗
Jun 07 Javascript
js加减乘除精确运算方法实例代码
Jan 17 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
zen_cart实现支付前生成订单的方法
2016/05/06 PHP
php 使用expat方式解析xml文件操作示例
2019/11/26 PHP
Laravel框架使用技巧之使用url()全局函数返回前一个页面的地址方法详解
2020/04/06 PHP
TopList标签和JavaScript结合两例
2007/08/12 Javascript
关于Jqzoom的使用心得 jquery放大镜效果插件
2010/04/12 Javascript
js变换显示图片的实例
2013/04/16 Javascript
jquery对ajax的支持介绍
2013/12/10 Javascript
js实现简单选项卡与自动切换效果的方法
2015/04/10 Javascript
jquery显示loading图片直到网页加载完成的方法
2015/06/25 Javascript
微信jssdk在iframe页面失效问题的解决措施
2016/03/03 Javascript
js中的关联数组与普通数组详解
2016/07/27 Javascript
IE8利用自带的setCapture和releaseCapture解决iframe的拖拽事件方法
2016/10/25 Javascript
JS实现课堂随机点名和顺序点名
2017/03/09 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
Map.vue基于百度地图组件重构笔记分享
2017/04/17 Javascript
vue的全局变量和全局拦截请求器的示例代码
2018/09/13 Javascript
QML实现圆环颜色选择器
2019/09/25 Javascript
[00:03]DOTA2新版本PA至宝展示
2014/11/19 DOTA
[11:44]Ti9 OG夺冠时刻
2019/08/25 DOTA
Python采用socket模拟TCP通讯的实现方法
2014/11/19 Python
python 将列表里的字典元素合并为一个字典实例
2020/09/01 Python
Python爬虫抓取论坛关键字过程解析
2020/10/19 Python
python与idea的集成的实现
2020/11/20 Python
使用Python爬取小姐姐图片(beautifulsoup法)
2021/02/11 Python
Python就将所有的英文单词首字母变成大写
2021/02/12 Python
配置H5的滚动条样式的示例代码
2018/03/09 HTML / CSS
优秀班集体获奖感言
2014/02/03 职场文书
师范大学生求职信
2014/06/13 职场文书
教师党的群众路线学习心得体会
2014/11/04 职场文书
2014年班组工作总结
2014/11/20 职场文书
升职自荐信怎么写
2015/03/05 职场文书
幼儿园老师工作总结2015
2015/05/22 职场文书
超强台风观后感
2015/06/09 职场文书
检讨书范文
2019/04/16 职场文书
DSP接收机前端设想
2022/04/05 无线电
Python可视化神器pyecharts绘制地理图表
2022/07/07 Python