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 void129      */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  />‘).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="http://www.mamicode.com/‘ + c.value + ‘" />‘));154                 break;155             case ‘text‘:156             default:157                 div.html(c.value);158                 break;159             }160         }161         else162         {   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 float177          */178         var getOpacity = function(id)179         {180             if(!isIe)181             {   return $(‘#‘ + id).css(‘opacity‘);    }182 183             var el = document.getElementById(id);184             return (undefined != el185                     && undefined != el.filters186                     && undefined != el.filters.alpha187                     && 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 void227      */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 }

  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-word107 }108 109 PRE {110     CURSOR: pointer111 }112 113 PRE:hover {114     BACKGROUND: gray115 }116 117 #dialog1-overlay {118     BACKGROUND: blue;119     FILTER: alpha(opacity =     80);120     opacity: 0.8121 }122 123 #dialog2 .content {124     BACKGROUND-IMAGE:125         url(http://www.cnblogs.com/visec479public/uploads/demo/images/300x125.gif);126     WIDTH: 250px;127     HEIGHT: 80px128 }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> | <A138                 href="dialog.css">下载CSS文件</A> | <A139                 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-id165                     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-overlay186                     {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 .content197                     {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                 <BUTTON226                     onclick="dlg = new Dialog(‘hide()回调函数‘,{afterHide:function(){alert(‘after hide‘);},beforeHide:function(){alert(‘before hide‘);return true;},modal:false});dlg.show();">显示</BUTTON>227                 &nbsp;&nbsp;&nbsp;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> | <A242                 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>