ModelDialog 可拖拽的JS模态对话框

小提示

Ctrl+/代码提示(需IE11)
F11键放大 ESC键缩小
PgUp上页 PgDn下页

推荐代码

运行代码缩小

引入JS
- 3.0.0 2.2.0 2.1.4 2.1.3 2.1.2 2.1.1 2.1.0 2.0.3 2.0.2 2.0.1 2.0.0 1.12.0 1.11.3 1.11.2 1.11.1 1.11.0 1.10.2 1.10.1 1.10.0 1.9.1 1.9.0 1.8.3 1.8.2 1.8.1 1.8.0 1.7.2 1.7.1 1.7 1.6.4 1.6.2 1.6.1 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0
- 1.7.3 1.7.2 1.7.1.0 1.7.0.0
- 2.0.0-beta.0 2.0.0-alpha.55 1.5.0-rc.0 1.4.8 1.4.0 1.3.20 1.2.29 1.1.5 1.0.8
- 1.8.3 1.7.0 1.6.0 1.5.2 1.4.4 1.3.3 1.2.4 1.1.7
- 1.10.4 1.9.7 1.8.10 1.7.8 1.6.3 1.5.4 1.4.6 1.3.3
- core1.6.0 core-compat1.6.0 core1.5.2 core-compat1.5.2 core-full-compat-yc1.4.5 core-full-compat1.4.5 core-full-nocompat-yc1.4.5 core-full-nocompat1.4.5
- 1.4.2 1.4.1 1.4.0 1.3.0 1.2.0 1.1.0
- 3.7.3 3.7.2 3.7.1 3.7.0 3.7 3.6.2 3.6.1 3.6

引入框架
- 1.4.5 1.4.4 1.4.3 1.4.2 1.4.1 1.4.0 1.3.2
- 1.11.4 1.11.3 1.11.2 1.11.1 1.11.0 1.10.4 1.10.3 1.10.2
- 3.3.6 3.3.5 3.3.0 3.2.0 2.3.2

汉王

HTML代码

复制格式化注释注释清空

放大

<!DOCTYPE HTML>
<html>
  <head>
    <title>ModelDialog仅在窗口范围拖拽的模态对话框</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
 	<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("//ku.shouce.ren/files/images/201601/56a318c0f323d.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模板</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();">TEST</button><br/>
  </body>
</html>

CSS代码

复制格式化注释注释颜色清空

放大

JS代码

复制格式化注释注释清空

放大

运行代码

简介

请输入代码名称！

名称

ModelDialog 可拖拽的JS模态对话框

分类

表格图层

描述

ModelDialog仅在窗口范围拖拽的模态对话框，代码中的ModelDialog代码部分可以单独摘出来封闭成一个文件，用时候引入就行了。这个模态对话框对大家来说是比较常见的，它可以定义标题、主体内容、对话框、头部、关闭按钮、遮盖层背景色、遮...