基于jquery写的dialog框

 (function() {
  2     /*MODAL PANEL*/
  3     /**
  4      * 生成遮罩
  5      */
  6     MODALPANEL = {
  7         createModalPanel:function() {
  8             var mp = $("<div id='MODALPANEL'></div>");
  9             var mpStyles = {
 10                 position: 'absolute',
 11                 background: '#333333',
 12                 width: '100%',
 13                 display:'none',
 14                 height: $(window).height(),
 15                 top: 0,
 16                 left: 0,
 17                 zIndex: 65500,
 18                 opacity: .4
 19             };
 20             this.element = mp.css(mpStyles).prependTo('body');
 21             return this.element;
 22         },
 23         show:function() {
 24             var panel = this.createModalPanel();
 25             panel.css({
 26                 width: '100%',
 27                 height: $(window).height()
 28             }).show();
 29         },
 30         hide:function() {
 31             $('#MODALPANEL').remove();
 32         }
 33     };
 34     /**
 35      * 随机数生成函数
 36      * @param target
 37      * @param methods
 38      */
 39     $uid = function() {
 40         return parseInt(Math.random() * (100000 - 51 + 1) + 51);
 41     }
 42 
 43     var EventUtil=new Object;
 44     EventUtil.addEventHandler=function(oTarget,sEventType,fnHandler){
 45     if(oTarget.addEventListener){
 46     oTarget.addEventListener(sEventType,fnHandler,false);
 47     }else if(oTarget.attachEvent){
 48     oTarget.attachEvent("on"+sEventType,fnHandler);
 49     }else{
 50     oTarget["on"+sEventType]=fnHandler
 51     }
 52     };
 53 
 54 
 55     /**
 56      * Extend 扩展类，对象的属性或者方法
 57      *
 58      * @param target 目标对象
 59      * @param methods 这里改成param也许更合适，表示承载着对象，方法的对象，用于target的扩展
 60      */
 61     function extend(target, methods) {
 62 
 63         if (!target) {
 64             target = {};
 65         }
 66 
 67         for (var prop in methods) {
 68             target[prop] = methods[prop];
 69         }
 70 
 71         return target;
 72     }
 73     //初始化一些对象
 74     var $window = $(window),
 75     $document = $(document),
 76     html = document.documentElement,
 77     isIE6 = !('minWidth' in html.style),
 78     isIE = (document.all) ? true : false,
 79     isLosecapture = 'onlosecapture' in html,
 80     isSetCapture = 'setCapture' in html;
 81 
 82     /**
 83      * Dialog构造器
 84      */
 85     Dialog = function(url, params) {
 86         //将参数初始化为对象属性
 87         this.url = url;
 88         this.UID = $uid();
 89         //给该构造器设置默认参数
 90         extend(this, {
 91             width:400,
 92             height:500,
 93             title:'',/*窗口标题*/
 94             dragable:true,/*是否允许拖拽*/
 95             resizeable:true/*是否允许改变尺寸*/
 96         });
 97 
 98         //将第二个参数赋值给Dialog构造器对象
 99         extend(this, params);
100         //弹出dialog对象
101         MODALPANEL.show();
102         this.onShow();
103         this.onClose();
104         //拖放dialog框大小
105         this.resize();
106         //移动dialog框
107         this.drag();
108     }
109 
110     /**
111      * 设置Dialog构造器方法
112      */
113     extend(Dialog.prototype, {
114         //用来显示dialog框
115         onShow:function() {
116             if(this.width<200){
117                 this.width = 200;
118             }
119             if(this.height<200){
120                 this.height = 200;
121             }
122             var height = $(window).height();
123             var width = $(window).width();
124             this.top = (height - this.height) / 2 - 22;
125             this.left = (width - this.width) / 2;
126             if (this.top < 100) {
127                 this.top = 100;
128             }
129             if (this.left < 100) {
130                 this.left = 100;
131             }
132             var div = $('<div id="dialog_' + this.UID + '" class="dialog"></div>');
133             var widths = (this.width + 22) + 'px';
134             this.width = this.width + 'px';
135             this.height = this.height + 'px';
136 
137             div.css({
138                 visibility:'visible',
139                 zoom:1,
140                 opacity:1,
141                 zIndex:65534,
142                 position:'absolute',
143                 top:this.top + 'px',
144                 left:this.left + 'px',
145                 width:widths
146             });
147             //dialog主体
148             var html = '<div class="dialog-box">' +
149                 '<div class="dialog-head clearfix">' +
150                 '<div class="dialog-title flt">' + this.title + '</div>' +
151                 '<a class="btn-close frt" href="javascript:void(0)">&#10006;</a>' +
152                 '</div>' +
153                 '<div class="dialog-content-head" style="font-size:0;height:0;"></div>' +
154                 '<div container="true" class="dialog-content-body" style="height:' + this.height + ';width:' + this.width + '">' +
155                 '测试一下' +
156                 '</div>' +
157                 '<div class="dialog-content-foot" style="font-size:0;height:0;"></div>' +
158                 '<div class="btn-resize"></div>' +
159                 '</div>';
160             div.html(html);
161             div.prependTo('body');
162             this.cloneDialog();
163         },
164         cloneDialog:function(){
165             var els = $('#dialog_'+this.UID);
166             var hot_div = $('<div id="dialogdragghost_'+this.UID+'"></div>');
167             hot_div.css({
168                 position:'absolute',
169                 cursor:'move',
170                 background:'#66CCFF',
171                 display:'none',
172                 opacity:0.3,
173                 width:els.width(),
174                 height:els.height(),
175                 top:els.offset().top,
176                 left:els.offset().left,
177                 zIndex:65535
178             }).prependTo('body');
179         },
180         //用来关闭dialog框
181         onClose:function() {
182             var dialog = $("#dialog_" + this.UID);
183             var dragDialog = $("#dialogdragghost_" + this.UID);
184             $("#dialog_" + this.UID + " .btn-close").click(function() {
185                 dialog.remove();
186                 MODALPANEL.hide();
187                 dragDialog.remove();
188             });
189         },
190         drag:function() {
191             //初始化对象
192             var els = $('#dialog_'+this.UID),
193               h_els = $('#dialog_'+this.UID+' .dialog-head'),
194               d_els = $('#dialogdragghost_'+this.UID),
195               x = y = 0,
196               top = left = 0;
197             var dragEnd = function(){
198                 els.offset({top:top,left:left});
199                 //取消捕获范围
200                 if(h_els[0].releaseCapture){
201                     h_els[0].releaseCapture();
202                 }
203                 //if (!isIE6) {
204                     h_els.unbind('losecapture', dragEnd);
205                 //} else {
206                     $window.unbind('blur', dragEnd);
207                 //}
208                 $document.unbind("mousemove");
209                 d_els.hide();
210             };
211             if (isIE) {
212                 h_els.bind('losecapture', dragEnd);
213             } else {
214                 //$document.bind('losecapture', dragEnd);
215                 $window.bind('blur', dragEnd);
216             }
217 
218             //else if(window.captureEvents){
219                 //window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
220             //}
221             h_els.mousedown(function(e){   
222                             //设置捕获范围
223             if( h_els[0].setCapture){
224                   h_els[0].setCapture();
225             }
226                 //按下元素后，计算当前鼠标与对象计算后的坐标
227                 x = e.clientX - els.offset().left;
228                 y = e.clientY - els.offset().top;
229                 d_els.css({width:els.width()+'px',height:els.height()+'px'});
230                 $document.bind("mousemove",function(e){
231                     d_els.show();
232                     left = e.clientX-x;
233                     top = e.clientY-y;
234                     if(left < 0){
235                         left = 0;
236                     }
237                     if(top < 0){
238                         top = 0;
239                     }
240                     d_els.offset({top:top,left:left});
241                     //防止默认事件发生
242                     e.preventDefault();
243                 }).bind("mouseup",function(e){
244                     dragEnd();
245                 });
246                 //防止默认事件发生
247                 e.preventDefault();
248             });
249         },
250         resize:function() {
251             //初始化对象
252             var els = $('#dialog_'+this.UID),   //需要改变宽度的外框
253             c_els = $('#dialog_'+this.UID+' .dialog-content-body'),     //需要改变宽度和高度的内框
254             r_els = $('#dialog_'+this.UID+' .btn-resize'),
255             x = y = 0,$this = this,
256             width = height = 0;  //设置点击
257 //            //设置捕获范围
258 //            if( r_els[0].setCapture){
259 //                  r_els[0].setCapture();
260 //            }
261             //绑定事件
262             r_els.mousedown(function(e){
263                 //按下元素后，计算当前鼠标与对象计算后的坐标
264                 x = e.clientX - els.width();
265                 y = e.clientY - c_els.height();
266 
267                 //设置捕获范围,鼠标超出浏览器范围继续捕捉
268                 if(r_els.setCapture){
269                     r_els.setCapture();
270                 }else if(window.captureEvents){
271                     window.captureEvents(Event.MOUSEMOVE | Event.MOUSEUP);
272                 }
273                 $document.bind("mousemove",function(e){
274                     width = e.clientX-x;
275                     height = e.clientY-y;
276                     if(e.clientX < $(window).width()){
277                         if(width>200){
278                             els.width(width+'px');
279                             c_els.width(width-22+'px');
280                         }
281                     }
282                     if(e.clientY < $(window).height()){
283                         if(height>100){
284                             c_els.height(height+'px');
285                         }
286                     }
287                     //防止默认事件发生,例如：拖动过程中鼠标选中事件
288                     e.preventDefault();
289                 }).bind("mouseup",function(e){
290                     $this.resizeEnd(r_els);
291                 });
292                 //防止默认事件发生
293                 e.preventDefault();
294             });
295         },
296         resizeEnd:function(r_els){
297             //取消捕获范围，鼠标抬起的时候停止捕捉
298 //            if(r_els.releaseCapture){
299 //                r_els.releaseCapture();
300 //            }else if(window.captureEvents){
301 //                window.captureEvents(Event.MOUSEMOVE|Event.MOUSEUP);
302 //            }
303             $document.unbind("mousemove");     
304         }
305     });
306 
307     //防止谷歌浏览器js报警告
308     var all = $.event.props,
309         len = all.length,
310         res = [];
311     while (len--) {
312         var el = all[len];
313         if (el != 'layerX' && el != 'layerY') res.push(el);
314     }
315     $.event.props = res;
316 
317 
318     /*提示框对象*/
319     MessageBox = function(flag,content){
320         var MessageBox = $("<div class='msgbox'></div>");
321         MessageBox.html(content);
322         if(flag == false){
323             MessageBox.addClass('warning');
324         }else{
325             MessageBox.addClass('success');
326         }
327         MessageBox.prependTo('body');
328         //延时1秒关闭提示框
329         setTimeout(function(){
330             MessageBox.remove();
331         },1000);
332     };
333 })();//END