Tip: You can modify some of the code before running
<! 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=utf-8 "/> <title>js Simulated dialog pops up drag floating layer </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 (images/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 (images/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 (images/103419495_p.gif); background-position:-42px-10px; width:10px; height:10px; font-size:0; } </style> </pead> <body > <input value= "Create" type= "button" onclick= "creat ()"/> <script> va R 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 && 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:200, minheight:200, Cancelico:true, Resizeico:false, Info: " News headlines, Content: "Nothing", 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//Construction dialog var obj = [' Dialogcontainter ', ' dialogtitle ', ' dialogtitleinfo ', ' Dialogtitleico ', ' dialogbody ', ' Dialogbottom ']; Forvar 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////Sets the dialog's long width, left, top with (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.backgroundposition==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) {wind Ow.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: "Terran", Content: "Is the human race strong?"}); 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></td> </tr> </table>
Tip: You can modify some of the code before running
