<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <ptml xmlns=" http://www.w3.org/1999/xhtml "> <pead> <meta http-equiv=" Content-type "content=" text/html; charset=gb2312 "/> <title>Dialog</title> <style type=" text/css "><!--. dialogcontainter{ height:400px; width:400px; border:1px solid #14495f; Position:absolute; font-size:13px;} . dialogtitle{height:26px Width:auto; Background-image:url (' yun_qi_img/103444839_p.gif ');} . dialogtitleinfo{float:left;height:20px; margin-top:2px; margin-left:10px;line-height:20px; vertical-align:middle ; Color: #FFFFFF; Font-weight:bold; Dialogtitleico{float:right; height:20px; width:21px; margin-top:2px; margin-right:5px;text-align:center; line-height:20px; Vertical-align:middle; Background-image:url (' yun_qi_img/103419495.p.gif '); background-position:-21px 0px}. dialogbody{padding:10px; width : auto; Background-color: #FFFFFF;} . dialogbottom{bottom:1px; right:1px;cursor:nw-resize; Position:absolute; Background-image:url (' yun_qi_img/103419495.p.gif '); background-position:-42px-10px; width:10px; height:10px; font-size:0;} --></style><style type= "Text/css" bogus= "1" >.dialogcontainter{height:400px; width:400px; Solid #14495f; Position:absolute; font-size:13px;} . dialogtitle{height:26px Width:auto; Background-image:url (' yun_qi_img/103444839.p.gif ');} . dialogtitleinfo{float:left;height:20px; margin-top:2px; margin-left:10px;line-height:20px; vertical-align:middle ; Color: #FFFFFF; Font-weight:bold; Dialogtitleico{float:right; height:20px; width:21px; margin-top:2px; margin-right:5px;text-align:center; line-height:20px; Vertical-align:middle; Background-image:url (' yun_qi_img/103419495.p.gif '); background-position:-21px 0px}. dialogbody{padding:10px; width : auto; Background-color: #FFFFFF;} . dialogbottom{bottom:1px; right:1px;cursor:nw-resize; Position:absolute; Background-imaGe:url (' yun_qi_img/103419495.p.gif '); background-position:-42px-10px; width:10px; height:10px; font-size:0;} </style> </pead> <body > <input value= "Create" type= "button" onclick= "creat ()"/> <div ' AA ' & gt;</div> <script type= "Text/javascript" ><!--var z=1,i=1,left=10 var Isie = (document.all)? True:false; var $ = function (ID) {return document.getElementById (ID); }; var Extend = function (destination, source) {for (var property in source) {Destination[property] = Source[property]; The var Bind = function (object, Fun,args) {return function () {return fun.apply (object,args| | []); } var Bindaseventlistener = function (object, fun) {var args = Array.prototype.slice.call (arguments). Slice (2); return function (event) {return Fun.apply (object, [Event | | window.event].concat (args)); } var currentstyle = function (Element) {return Element.currentstyle | | Document.defaultView.getComputedStyle (element , null); } function Create (ELM,PARENT,FN) {var element = document.createelement (elm); Fn&&fn (element); parent&& Parent.appendchild (element); return element}; function AddListener (ELEMENT,E,FN) {Element.addeventlistener?element.addeventlistener (E,fn,false): Element.attachevent ("on" + E,fn)}; function RemoveListener (ELEMENT,E,FN) {Element.removeeventlistener?element.removeeventlistener (E,fn,false): Element.detachevent ("on" + E,fn)}; var Class = function (properties) {var _class = function () {return (arguments[0]!== null && this.initialize && Amp typeof (This.initialize) = = ' function ')? This.initialize.apply (this, arguments): this;}; _class.prototype = properties; return _class; }; var Dialog = new Class ({options:{width:400, height:400, left:100, top:100, titleheight:26, Minwidth:2 minheight:200, Cancelico:true, Resizeico:false, Info: "News Headlines", content: "No content", zindex:2}, Initialize : function (options) {this._dragobj = null; ThIs._resize = null; This._cancel = null; This._body = null; this._x = 0; this._y = 0; THIS._FM = Bindaseventlistener (this, this. Move); This._fs = Bind (this, this. Stop); This._isdrag = null; THIS._CSS = null; This. Width = This.options.Width; This. Height = This.options.Height; This. left = This.options.Left; This. top = This.options.Top; This. Cancelico = This.options.CancelIco; This. Info = This.options.Info; This. Content = this.options.Content; This. MinWidth = This.options.Minwidth; This. MinHeight = This.options.Minheight; This. Titleheight= This.options.Titleheight; This. ZIndex = This.options.Zindex; Extend (this,options); Dialog.zindex = this. ZIndex////////////////////////////////////////////////////////////////////////////////Constructs dialog var obj = [' Dialogcontainter ', ' dialogtitle ', ' dialogtitleinfo ', ' Dialogtitleico ', ' dialogbody ', ' dialogbottom ']; for (var i = 0;i<obj.length;i++) {obj[I]=create (' div ', null,function (elm) {elm.classname = obj[i];}); } obj[2].innerhtml = this. Info; Obj[4].innerhtml = this. Content; Obj[1].appendchild (obj[2]); Obj[1].appendchild (Obj[3]); Obj[0].appendchild (obj[1]); Obj[0].appendchild (Obj[4]); Obj[0].appendchild (Obj[5]); Document.body.appendChild (Obj[0]); This._dragobj = obj[0]; This._resize = obj[5]; This._cancel = obj[3]; This._body = obj[4]; O,X1,X2////Set Dialog's long wide, left, Top and (this._dragobj.style) {height = this. Height + "px"; Top + "px", width = this. Width + "px"; Left + ' px '; zindex = this. ZIndex; } This._body.style.height = this. Height-this. Titleheight-parseint (Currentstyle (this._body). paddingleft) *2+ ' px '; Add Event AddListener (This._dragobj, ' MouseDown ', Bindaseventlistener (this, this. Start,true)); AddListener (This._cancel, ' mouseover', Bind (this,this. Changebg,[this._cancel, ' 0px 0px ', ' -21px 0px ']); AddListener (This._cancel, ' mouseout ', Bind (this,this. Changebg,[this._cancel, ' 0px 0px ', ' -21px 0px ']); AddListener (This._cancel, ' MouseDown ', Bindaseventlistener (this,this). disappear)); AddListener (this._body, ' MouseDown ', Bindaseventlistener (this), this. cancelbubble)); AddListener (this._resize, ' MouseDown ', Bindaseventlistener (this), this. Start,false)); }, Disappear:function (e) {this. Cancelbubble (e); Document.body.removeChild (This._dragobj); }, Cancelbubble:function (e) {this._dragobj.style.zindex = ++dialog.zindex; Document.all? (e.cancelbubble=true):(e.stoppropagation ())}, Changebg:function (o,x1,x2) {o.style.backgroundposition = (o.style.ba ckgroundposition==x1)? x2:x1; }, Start:function (E,isdrag) {if (!isdrag) {this. Cancelbubble (e);} This._css = Isdrag? {x: ' Left ', y: ' Top '}:{x: ' width ', y: ' height '} this._dragobj.style.zindex = ++dialog.zindex; This._isdrag = Isdrag; This._x = Isdrag? (e.clientx-this._dragobj.offsetleft| | 0):(This._dragobj.offsetleft| | 0); This._y = Isdrag? (E.clienty-this._dragobj.offsettop | | 0):(this._dragobj.offsettop| | 0); if (Isie) {AddListener (this._dragobj, "Losecapture", THIS._FS); This._dragobj.setcapture (); else {e.preventdefault (); AddListener (window, "blur", THIS._FS); AddListener (document, ' MouseMove ', THIS._FM) AddListener (document, ' MouseUp ', This._fs)}, Move:function (e) { Window.getselection? Window.getselection (). Removeallranges (): Document.selection.empty (); var i_x = e.clientx-this._x, i_y = e.clienty-this._y; This._dragobj.style[this._css.x] = (This._isdrag? Math.max (i_x,0): Math.max (i_x,this. minwidth)) + ' px '; THIS._DRAGOBJ.STYLE[THIS._CSS.Y] = (This._isdrag? Math.max (i_y,0): Math.max (i_y,this. minheight)) + ' px ' if (!this._isdrag) this._body.style.height = Math.max (i_y-this. TitleheighT,this. Minheight-this.titleheight) -2*parseint (Currentstyle (this._body). Paddingleft) + ' px '; }, Stop:function () {RemoveListener (document, ' MouseMove ', this._fm); RemoveListener (document, ' MouseUp ', this._fs); if (Isie) {RemoveListener (this._dragobj, "Losecapture", THIS._FS); This._dragobj.releasecapture (); else {removelistener (window, "blur", THIS._FS); }; }) New Dialog ({width:300,height:300,left:300,top:300}); New Dialog ({Info: "cloud-dwelling community", Content: "Cloud-dwelling community www.jb51.net"}); function creat () {new Dialog ({info:title= title +i,left:300+left,top:300+left,content: ' Content ' +i,zindex: (++dialog.zindex )}); I++;left +=10; }//--></script> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
