jQuery Dialog弹出层对话框插件
Dialog.js的相关注释已经添加，可以按照注释，进行相关样式的修改，适用于自定义的各个系统！
dialog.js
1 /** 2 * jQuery的Dialog插件。 3 * 4 * @param object content 5 * @param object options 选项。 6 * @return 7 */ 8 function Dialog(content, options) 9 { 10 var defaults = { // 默认值。 11 title:'标题', // 标题文本，若不想显示title请通过CSS设置其display为none 12 showTitle:true, // 是否显示标题栏。 13 closeText:'[关闭]', // 关闭按钮文字，若不想显示关闭按钮请通过CSS设置其display为none 14 draggable:true, // 是否移动 15 modal:true, // 是否是模态对话框 16 center:true, // 是否居中。 17 fixed:true, // 是否跟随页面滚动。 18 time:0, // 自动关闭时间，为0表示不会自动关闭。 19 id:false // 对话框的id，若为false，则由系统自动产生一个唯一id。 20 }; 21 var options = $.extend(defaults, options); 22 options.id = options.id ? options.id : 'dialog-' + Dialog.__count; // 唯一ID 23 var overlayId = options.id + '-overlay'; // 遮罩层ID 24 var timeId = null; // 自动关闭计时器 25 var isShow = false; 26 var isIe = $.browser.msie; 27 var isIe6 = $.browser.msie && ('6.0' == $.browser.version); 28 29 /* 对话框的布局及标题内容。*/ 30 var barHtml = !options.showTitle ? '' : 31 '<div class="bar"><span class="title">' + options.title + '</span><a class="close">' + options.closeText + '</a></div>'; 32 var dialog = $('<div id="' + options.id + '" class="dialog">'+barHtml+'<div class="content"></div></div>').hide(); 33 $('body').append(dialog); 34 35 36 /** 37 * 重置对话框的位置。 38 * 39 * 主要是在需要居中的时候，每次加载完内容，都要重新定位 40 * 41 * @return void 42 */ 43 var resetPos = function() 44 { 45 /* 是否需要居中定位，必需在已经知道了dialog元素大小的情况下，才能正确居中，也就是要先设置dialog的内容。 */ 46 if(options.center) 47 { 48 var left = ($(window).width() - dialog.width()) / 2; 49 var top = ($(window).height() - dialog.height()) / 2; 50 if(!isIe6 && options.fixed) 51 { dialog.css({top:top,left:left}); } 52 else 53 { dialog.css({top:top+$(document).scrollTop(),left:left+$(document).scrollLeft()}); } 54 } 55 } 56 57 /** 58 * 初始化位置及一些事件函数。 59 * 60 * 其中的this表示Dialog对象而不是init函数。 61 */ 62 var init = function() 63 { 64 /* 是否需要初始化背景遮罩层 */ 65 if(options.modal) 66 { 67 $('body').append('<div id="' + overlayId + '" class="dialog-overlay"></div>'); 68 $('#' + overlayId).css({'left':0, 'top':0, 69 /*'width':$(document).width(),*/ 70 'width':'100%', 71 /*'height':'100%',*/ 72 'height':$(document).height(), 73 'z-index':++Dialog.__zindex, 74 'position':'absolute'}) 75 .hide(); 76 } 77 78 dialog.css({'z-index':++Dialog.__zindex, 'position':options.fixed ? 'fixed' : 'absolute'}); 79 80 /* IE6 兼容fixed代码 */ 81 if(isIe6 && options.fixed) 82 { 83 dialog.css('position','absolute'); 84 resetPos(); 85 var top = parseInt(dialog.css('top')) - $(document).scrollTop(); 86 var left = parseInt(dialog.css('left')) - $(document).scrollLeft(); 87 $(window).scroll(function(){ 88 dialog.css({'top':$(document).scrollTop() + top,'left':$(document).scrollLeft() + left}); 89 }); 90 } 91 92 /* 以下代码处理框体是否可以移动 */ 93 var mouse={x:0,y:0}; 94 function moveDialog(event) 95 { 96 var e = window.event || event; 97 var top = parseInt(dialog.css('top')) + (e.clientY - mouse.y); 98 var left = parseInt(dialog.css('left')) + (e.clientX - mouse.x); 99 dialog.css({top:top,left:left}); 100 mouse.x = e.clientX; 101 mouse.y = e.clientY; 102 }; 103 dialog.find('.bar').mousedown(function(event){ 104 if(!options.draggable){ return; } 105 106 var e = window.event || event; 107 mouse.x = e.clientX; 108 mouse.y = e.clientY; 109 $(document).bind('mousemove',moveDialog); 110 }); 111 $(document).mouseup(function(event){ 112 $(document).unbind('mousemove', moveDialog); 113 }); 114 115 /* 绑定一些相关事件。 */ 116 dialog.find('.close').bind('click', this.close); 117 dialog.bind('mousedown', function(){ dialog.css('z-index', ++Dialog.__zindex); }); 118 119 // 自动关闭 120 if(0 != options.time){ timeId = setTimeout(this.close, options.time); } 121 } 122 123 124 /** 125 * 设置对话框的内容。 126 * 127 * @param string c 可以是HTML文本。 128 * @return void 129 */ 130 this.setContent = function(c) 131 { 132 var div = dialog.find('.content'); 133 if('object' == typeof(c)) 134 { 135 switch(c.type.toLowerCase()) 136 { 137 case 'id': // 将ID的内容复制过来，原来的还在。 138 div.html($('#' + c.value).html()); 139 break; 140 case 'img': 141 div.html('加载中...'); 142 $('<img alt="" />').load(function(){div.empty().append($(this));resetPos();}) 143 .attr('src',c.value); 144 break; 145 case 'url': 146 div.html('加载中...'); 147 $.ajax({url:c.value, 148 success:function(html){div.html(html);resetPos();}, 149 error:function(xml,textStatus,error){div.html('出错啦')} 150 }); 151 break; 152 case 'iframe': 153 div.append($('<iframe src="' + c.value + '" />')); 154 break; 155 case 'text': 156 default: 157 div.html(c.value); 158 break; 159 } 160 } 161 else 162 { div.html(c); } 163 } 164 165 /** 166 * 显示对话框 167 */ 168 this.show = function() 169 { 170 if(undefined != options.beforeShow && !options.beforeShow()) 171 { return; } 172 173 /** 174 * 获得某一元素的透明度。IE从滤境中获得。 175 * 176 * @return float 177 */ 178 var getOpacity = function(id) 179 { 180 if(!isIe) 181 { return $('#' + id).css('opacity'); } 182 183 var el = document.getElementById(id); 184 return (undefined != el 185 && undefined != el.filters 186 && undefined != el.filters.alpha 187 && undefined != el.filters.alpha.opacity) 188 ? el.filters.alpha.opacity / 100 : 1; 189 } 190 /* 是否显示背景遮罩层 */ 191 if(options.modal) 192 { $('#' + overlayId).fadeTo('slow', getOpacity(overlayId)); } 193 dialog.fadeTo('slow', getOpacity(options.id), function(){ 194 if(undefined != options.afterShow){ options.afterShow(); } 195 isShow = true; 196 }); 197 // 自动关闭 198 if(0 != options.time){ timeId = setTimeout(this.close, options.time); } 199 200 resetPos(); 201 } 202 203 204 /** 205 * 隐藏对话框。但并不取消窗口内容。 206 */ 207 this.hide = function() 208 { 209 if(!isShow){ return; } 210 211 if(undefined != options.beforeHide && !options.beforeHide()) 212 { return; } 213 214 dialog.fadeOut('slow',function(){ 215 if(undefined != options.afterHide){ options.afterHide(); } 216 }); 217 if(options.modal) 218 { $('#' + overlayId).fadeOut('slow'); } 219 220 isShow = false; 221 } 222 223 /** 224 * 关闭对话框 225 * 226 * @return void 227 */ 228 this.close = function() 229 { 230 if(undefined != options.beforeClose && !options.beforeClose()) 231 { return; } 232 233 dialog.fadeOut('slow', function(){ 234 $(this).remove(); 235 isShow = false; 236 if(undefined != options.afterClose){ options.afterClose(); } 237 }); 238 if(options.modal) 239 { $('#'+overlayId).fadeOut('slow', function(){$(this).remove();}); } 240 clearTimeout(timeId); 241 } 242 243 244 245 init.call(this); 246 this.setContent(content); 247 248 Dialog.__count++; 249 Dialog.__zindex++; 250 } 251 Dialog.__zindex = 500; 252 Dialog.__count = 1; 253 Dialog.version = '1.0 beta'; 254 255 function dialog(content, options) 256 { 257 var dlg = new Dialog(content, options); 258 dlg.show(); 259 return dlg; 260 }
jquery.min.js
dialog.css
测试页面测试结果
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> 2 <HTML> 3 <HEAD lang=zh> 4 <TITLE>jQuery Dialog弹出层对话框插件演示</TITLE> 5 <META http-equiv=Content-Type content=text/html;charset=utf-8> 6 <META content="jquery,dialog,plugins,jquery plugins,弹出层,对话框" name=keywords> 7 <META content=jQuery插件dialog演示 name=description> 8 <LINK href="dialog.css" type=text/css rel=stylesheet> 9 <SCRIPT src="jquery.min.js" type=text/javascript></SCRIPT> 10 <SCRIPT src="dialog.js" type=text/javascript></SCRIPT> 11 <SCRIPT src="prettify.js" type=text/javascript></SCRIPT> 12 13 14 15 <STYLE type=text/css> 16 BODY { 17 FONT-SIZE: 90%; 18 BACKGROUND: #ddd; 19 TEXT-ALIGN: center 20 } 21 22 A { 23 CURSOR: pointer; 24 TEXT-DECORATION: none 25 } 26 27 A:hover { 28 TEXT-DECORATION: underline 29 } 30 31 .left { 32 FLOAT: left 33 } 34 35 .right { 36 FLOAT: right 37 } 38 39 .clear { 40 CLEAR: both 41 } 42 43 .center { 44 BORDER-RIGHT: gray 1px solid; 45 BORDER-TOP: gray 1px solid; 46 BACKGROUND: #fff; 47 MARGIN-LEFT: auto; 48 BORDER-LEFT: gray 1px solid; 49 WIDTH: 70%; 50 MARGIN-RIGHT: auto; 51 BORDER-BOTTOM: gray 1px solid 52 } 53 54 .header { 55 PADDING-RIGHT: 20px; 56 PADDING-LEFT: 20px; 57 BACKGROUND: #ddd; 58 PADDING-BOTTOM: 20px; 59 PADDING-TOP: 20px 60 } 61 62 .footer { 63 PADDING-RIGHT: 20px; 64 PADDING-LEFT: 20px; 65 BACKGROUND: #ddd; 66 PADDING-BOTTOM: 20px; 67 PADDING-TOP: 20px 68 } 69 70 .ad-left { 71 LEFT: 6px; 72 POSITION: absolute; 73 TOP: 100px 74 } 75 76 .ad-right { 77 RIGHT: 6px; 78 POSITION: absolute; 79 TOP: 100px 80 } 81 82 .content { 83 PADDING-RIGHT: 20px; 84 PADDING-LEFT: 20px; 85 PADDING-BOTTOM: 20px; 86 PADDING-TOP: 20px; 87 TEXT-ALIGN: left 88 } 89 90 .content .list { 91 PADDING-BOTTOM: 20px; 92 MARGIN: 20px; 93 BORDER-BOTTOM: gray 1px dotted 94 } 95 96 H5 { 97 MARGIN: 0px 98 } 99 100 PRE { 101 PADDING-RIGHT: 2px ! important; 102 PADDING-LEFT: 2px ! important; 103 PADDING-BOTTOM: 2px ! important; 104 MARGIN: 5px 10px 10px; 105 PADDING-TOP: 2px ! important; 106 WORD-WRAP: break-word 107 } 108 109 PRE { 110 CURSOR: pointer 111 } 112 113 PRE:hover { 114 BACKGROUND: gray 115 } 116 117 #dialog1-overlay { 118 BACKGROUND: blue; 119 FILTER: alpha(opacity = 80); 120 opacity: 0.8 121 } 122 123 #dialog2 .content { 124 BACKGROUND-IMAGE: 125 url(http://www.cnblogs.com/visec479public/uploads/demo/images/300x125.gif); 126 WIDTH: 250px; 127 HEIGHT: 80px 128 } 129 </STYLE> 130 131 <META content="MSHTML 6.00.6000.17063" name=GENERATOR> 132 </HEAD> 133 <BODY> 134 <DIV class=center> 135 <DIV class=header> 136 <H1>jQuery Dialog弹出层对话框插件演示</H1> 137 <SPAN class=left><A href="dialog.js">下载JS文件</A> | <A 138 href="dialog.css">下载CSS文件</A> | <A 139 href="http://www.cnblogs.com/visec479/p/3939645.html">返回相关文章</A> </SPAN><SPAN class=right>最后更新：<TIME>2014-8-28</TIME> 140 </SPAN> 141 <DIV class=clear></DIV> 142 </DIV> 143 <!-- end header --> 144 <DIV class=content> 145 <DIV class=list> 146 <H3>基本操作</H3> 147 <H5>默认的</H5> 148 <PRE class="prettyprint lang-js" 149 onclick="new Dialog('这是一个默认对话框').show();">new Dialog('这是一个默认对话框').show(); 150 </PRE> 151 <H5>非模态对话框</H5> 152 <PRE class="prettyprint lang-js" 153 onclick="new Dialog('非模态对话框，可以打开多个！',{modal:false}).show();">new Dialog('非模态对话框，可以打开多个！',{modal:false}).show(); 154 </PRE> 155 <H5>自动关闭</H5> 156 <PRE class="prettyprint lang-js" 157 onclick="new Dialog('5秒后自动关闭',{time:5000}).show();">new Dialog('5秒后自动关闭',{time:5000}).show(); 158 </PRE> 159 <H5>非fixed模式</H5> 160 <PRE class="prettyprint lang-js" 161 onclick="new Dialog('对话框不随滚动条移动',{fixed:false}).show();">new Dialog('对话框不随滚动条移动',{fixed:false}).show(); 162 </PRE> 163 <H5>显示指定ID的内容</H5> 164 <PRE class="prettyprint lang-js" id=content-type-id 165 onclick="new Dialog({type:'id',value:'content-type-id'}).show();">// 将显示本标签内的内容。 166 new Dialog({type:'id',value:'content-type-id'}).show(); 167 </PRE> 168 <H5>加载一张图片</H5> 169 <PRE class="prettyprint lang-js" 170 onclick="new Dialog({type:'img',value:'http://www.cnblogs.com/visec479public/uploads/demo/images/300x125.gif'}).show();">new Dialog({type:'img',value:'http://www.cnblogs.com/visec479public/uploads/demo/images/300x125.gif'}).show(); 171 </PRE> 172 <H5>加载一URL地址</H5> 173 <PRE class="prettyprint lang-js" 174 onclick="new Dialog({type:'url',value:'http://www.cnblogs.com/visec479public/uploads/demo/jquery/dialog/test.html'}).show();">new Dialog({type:'url',value:'http://www.cnblogs.com/visec479public/uploads/demo/jquery/dialog/test.html'}).show(); 175 </PRE> 176 <H5>加载一URL到iframe</H5> 177 <PRE class="prettyprint lang-js" 178 onclick="new Dialog({type:'iframe',value:'http://www.caixw.com'}).show();">new Dialog({type:'iframe',value:'http://www.caixw.com'}).show(); 179 </PRE> 180 </DIV> 181 <!-- end list --> 182 <DIV class=list> 183 <H3>自定义CSS</H3> 184 <H5>自定义背景遮盖层</H5> 185 <PRE class="prettyprint lang-css">#dialog1-overlay 186 { 187 background:blue; 188 opacity:0.8; 189 filter:alpha(opacity=80); 190 } 191 </PRE> 192 <PRE class="prettyprint lang-js" 193 onclick="new Dialog('自定义背景遮盖层',{id:'dialog1'}).show();">new Dialog('自定义背景遮盖层',{id:'dialog1'}).show(); 194 </PRE> 195 <H5>自定义内容部分背景</H5> 196 <PRE class="prettyprint lang-css">#dialog2 .content 197 { 198 width:250px; 199 height:80px; 200 background-image:url(http://www.cnblogs.com/visec479public/uploads/demo/images/300x125.gif); 201 } 202 </PRE> 203 <PRE class="prettyprint lang-js" 204 onclick="new Dialog('自定义内容部分背景',{id:'dialog2'}).show();">new Dialog('自定义内容部分背景',{id:'dialog2'}).show(); 205 </PRE> 206 <!--h3></h3> 207 <pre class="prettyprint lang-js"> 208 </pre--> 209 </DIV> 210 <!-- end list --> 211 <DIV class=list> 212 <H3>回调函数</H3> 213 <H5>show()函数</H5> 214 <PRE class="prettyprint lang-js" 215 onclick="new Dialog('show()回调函数',{afterShow:function(){alert('after show');},beforeShow:function(){alert('before show');return true;}}).show();">new Dialog('show()回调函数' 216 {beforeShow:function(){alert('before show'),return true},afterShow:function(){alert('after show');}}) 217 .show(); 218 </PRE> 219 <H5>hide()函数</H5> 220 <PRE class="prettyprint lang-js">dlg = new Dialog('hide()回调函数' 221 {beforeHide:function(){alert('before hide'),return true},afterHide:function(){alert('after hide');}}) 222 .show(); 223 dlg.hide(); 224 </PRE> 225 <BUTTON 226 onclick="dlg = new Dialog('hide()回调函数',{afterHide:function(){alert('after hide');},beforeHide:function(){alert('before hide');return true;},modal:false});dlg.show();">显示</BUTTON> 227 228 <BUTTON onclick=dlg.hide();>隐藏</BUTTON> 229 <BR> <BR> 230 <H5>close()函数</H5> 231 <PRE class="prettyprint lang-js" 232 onclick="new Dialog('close()回调函数',{afterClose:function(){alert('after close');},beforeClose:function(){alert('before close');return true;}}).show();">new Dialog('close()回调函数' 233 {beforeClose:function(){alert('before close'),return true},afterClose:function(){alert('after close');}}) 234 .show(); 235 </PRE> 236 </DIV> 237 <!-- end list --> 238 </DIV> 239 <!-- end content --> 240 <DIV class=footer> 241 ©2010 by <A href="http://www.cnblogs.com/visec479" rel=me>caixw.com</A> | <A 242 href="http://www.cnblogs.com/visec479/p/3939645.html">相关文章</A> 243 </DIV> 244 </DIV> 245 <!-- end center --> 246 <DIV class=ad-left></DIV> 247 <!-- end header --> 248 <DIV class=ad-right></DIV> 249 <!-- end footer --> 250 251 </BODY> 252 </HTML>
