JS点击弹出模态对话框，可拖拽，遮罩层效果

　　JS点击弹出模态对话框，可拖拽，遮罩层效果，作者给这个例子取名：ModelDialog，仅在窗口范围拖拽的模态对话框，代码中的ModelDialog代码部分可以单独摘出来封闭成一个文件，用时候引入就行了。

　　这个模态对话框对大家来说是比较常见的，它可以定义标题、主体内容、对话框、头部、关闭按钮、遮盖层背景色、遮盖层透明度、是否可拖拽、是否仅在窗口内拖动等各项功能的参数。

　　演示代码：

<!DOCTYPE HTML> <html> <head> <title>ModelDialog仅在窗口范围拖拽的模态对话框</title> <meta http-equiv="content-type" content="text/html; charset=gbk"> <style type="text/css"> body {margin:0;padding:0;} .md-dialog { border:1px solid #666666; color:#666666; font-size:14px; text-align:left; width:360px; } .md-head { background:url("") repeat-x scroll 0 0 transparent; border:1px solid #FFFFFF; color:#323232; font-weight:bold; height:35px; line-height:35px; padding-left:15px; position:relative; } .md-close { background:url("/uploads/allimg/1104/close.jpg") no-repeat scroll 0 0 transparent; display:block; height:10px; position:absolute; right:12px; top:11px; width:10px; cursor:pointer; } .md-body { background:none repeat scroll 0 0 #FFFFFF; padding:0 16px 20px; height : 100px; } </style> <script type="text/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; }(); </script> <script type="text/javascript"> function test(){ var str = '<div>这里自定义HTML模板，欢迎访问烈火学院 Liehuo.Net</div>'; var dialog = new ModelDialog({ template : str, //shadowOpy : 0.1, //dragable : false dragInWin : false //area : [0,500,0,500] }); dialog['onbi'] = function(){ alert('关闭了') } } </script> </head> <body> <button onclick="test();">点我测试（liehuo.net）</button> </body> </html> <center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>
提示：可修改后代码再运行!

热点

JS点击弹出模态对话框，可拖拽，遮罩层效果

由 dawei

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性

JS点击弹出模态对话框，可拖拽，遮罩层效果

由 dawei

相关文章

网站优化的整个完整步骤

基于PHP实现发微博动态代码实例

PHP文件操作简单介绍及函数汇总

您错过了

云直播技术：创新驱动，媒体行业的新飞跃

云直播技术：实现全球观众实时共享精彩瞬间

科技带领，云直播开启数字化生活新篇章

云直播技术，增强了线上活动的沉浸感与互动性