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();
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="">返回相关文章</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:''}).show();">new Dialog({type:'img',value:''}).show();
171 </PRE>
172 <H5>加载一URL地址</H5>
173 <PRE class="prettyprint lang-js"
174 onclick="new Dialog({type:'url',value:''}).show();">new Dialog({type:'url',value:''}).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();
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="" rel=me>caixw.com</A> | <A
242 href="">相关文章</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>