Js实现Dialog浮动窗口，可拖动关闭和动态创建，蓝色经典风格，可以创建一个新层，可设置弹出层的标题和内容，用它可实现一个登录框，或用在后台管理中。 示例： <!DOCTYPE html><br /> <html xmlns="http://www.w3.org/1999/xhtml"><br /> <head><br /> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><br /> <title>Dialog浮动窗口 - VeryHuo.COM</title><br /> <style type="text/css"><br /> .dialogcontainter{height:400px; width:400px; border:1px solid #14495f; position:absolute; font-size:13px;}<br /> .dialogtitle{height:26px; width:auto; background-image:url(http://www.veryhuo.com/uploads/allimg/1107/103444839_p.gif);}<br /> .dialogtitleinfo{float:left;height:20px; margin-top:2px; margin-left:10px;line-height:20px; vertical-align:middle; color:#FFFFFF; font-weight:bold; }<br /> .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(http://www.veryhuo.com/uploads/allimg/1107/103419495_p.gif);background-position:-21px 0px}<br /> .dialogbody{ padding:10px; width:auto; background-color: #FFFFFF;}<br /> .dialogbottom{<br /> bottom:1px; right:1px;cursor:nw-resize;<br /> position:absolute;<br /> background-image:url(http://www.veryhuo.com/uploads/allimg/1107/103419495_p.gif);<br /> background-position:-42px -10px;<br /> width:10px;<br /> height:10px;<br /> font-size:0;}<br /> </style><br /> </head><br /> <body ><br /> <input value="创建窗口" type="button" onclick="creat()" /><br /> <div id='aa'></div><br /> <script><br /> var z=1,i=1,left=10<br /> var isIE = (document.all) ? true : false;<br /> var $ = function (id) {<br /> return document.getElementById(id);<br /> };<br /> var Extend = function(destination, source) {<br /> for (var property in source) {<br /> destination[property] = source[property];<br /> }<br /> }<br /> var Bind = function(object, fun,args) {<br /> return function() {<br /> return fun.apply(object,args||[]);<br /> }<br /> }<br /> var BindAsEventListener = function(object, fun) {<br /> var args = Array.prototype.slice.call(arguments).slice(2);<br /> return function(event) {<br /> return fun.apply(object, [event || window.event].concat(args));<br /> }<br /> }<br /> var CurrentStyle = function(element){<br /> return element.currentStyle || document.defaultView.getComputedStyle(element, null);<br /> }<br /> function create(elm,parent,fn){var element = document.createElement(elm);fn&&fn(element); parent&&parent.appendChild(element);return element};<br /> function addListener(element,e,fn){ element.addEventListener?element.addEventListener(e,fn,false):element.attachEvent("on" + e,fn)};<br /> function removeListener(element,e,fn){ element.removeEventListener?element.removeEventListener(e,fn,false):element.detachEvent("on" + e,fn)};<br /> var Class = function(properties){<br /> var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') ? this.initialize.apply(this, arguments) : this;};<br /> _class.prototype = properties;<br /> return _class;<br /> };<br /> // 资源来自：烈火下载 http://www.veryhuo.com/down<br /> var Dialog = new Class({<br /> options:{<br /> Width : 400,<br /> Height : 400,<br /> Left : 100,<br /> Top : 100,<br /> Titleheight : 26,<br /> Minwidth : 200,<br /> Minheight : 200,<br /> CancelIco : true,<br /> ResizeIco : false,<br /> Info : "新闻标题",<br /> Content : "无内容",<br /> Zindex : 2<br /> },<br /> initialize:function(options){<br /> this._dragobj = null;<br /> this._resize = null;<br /> this._cancel = null;<br /> this._body = null;<br /> this._x = 0;<br /> this._y = 0;<br /> this._fM = BindAsEventListener(this, this.Move);<br /> this._fS = Bind(this, this.Stop);<br /> this._isdrag = null;<br /> this._Css = null;<br /> this.Width = this.options.Width;<br /> this.Height = this.options.Height;<br /> this.Left = this.options.Left;<br /> this.Top = this.options.Top;<br /> this.CancelIco = this.options.CancelIco;<br /> this.Info = this.options.Info;<br /> this.Content = this.options.Content;<br /> this.Minwidth = this.options.Minwidth;<br /> this.Minheight = this.options.Minheight;<br /> this.Titleheight= this.options.Titleheight;<br /> this.Zindex = this.options.Zindex;<br /> Extend(this,options);<br /> Dialog.Zindex = this.Zindex<br /> //构造dialog<br /> var obj = ['dialogcontainter','dialogtitle','dialogtitleinfo','dialogtitleico','dialogbody','dialogbottom'];<br /> for(var i = 0;i<obj.length;i++)<br /> { obj[i]=create('div',null,function(elm){elm.className = obj[i];}); }<br /> obj[2].innerHTML = this.Info;<br /> obj[4].innerHTML = this.Content;<br /> obj[1].appendChild(obj[2]);<br /> obj[1].appendChild(obj[3]);<br /> obj[0].appendChild(obj[1]);<br /> obj[0].appendChild(obj[4]);<br /> obj[0].appendChild(obj[5]);<br /> document.body.appendChild(obj[0]);<br /> this._dragobj = obj[0];<br /> this._resize = obj[5];<br /> this._cancel = obj[3];<br /> this._body = obj[4];<br /> ///o,x1,x2<br /> ////设置Dialog的长 宽 ,left ,top<br /> with(this._dragobj.style){<br /> height = this.Height + "px";top = this.Top + "px";width = this.Width +"px";left = this.Left + "px";zIndex = this.Zindex;<br /> }<br /> this._body.style.height = this.Height - this.Titleheight-parseInt(CurrentStyle(this._body).paddingLeft)*2+'px';<br /> /////////////////////////////////////////////////////////////////////////////// 添加事件<br /> addListener(this._dragobj,'mousedown',BindAsEventListener(this, this.Start,true));<br /> addListener(this._cancel,'mouseover',Bind(this,this.Changebg,[this._cancel,'0px 0px','-21px 0px']));<br /> addListener(this._cancel,'mouseout',Bind(this,this.Changebg,[this._cancel,'0px 0px','-21px 0px']));<br /> addListener(this._cancel,'mousedown',BindAsEventListener(this,this.Disappear));<br /> addListener(this._body,'mousedown',BindAsEventListener(this, this.Cancelbubble));<br /> addListener(this._resize,'mousedown',BindAsEventListener(this, this.Start,false));<br /> },<br /> Disappear:function(e){<br /> this.Cancelbubble(e);<br /> document.body.removeChild(this._dragobj);<br /> },<br /> Cancelbubble:function(e){<br /> this._dragobj.style.zIndex = ++Dialog.Zindex;<br /> document.all?(e.cancelBubble=true):(e.stopPropagation())<br /> },<br /> Changebg:function(o,x1,x2){<br /> o.style.backgroundPosition =(o.style.backgroundPosition==x1)?x2:x1;<br /> },<br /> Start:function(e,isdrag){<br /> if(!isdrag){this.Cancelbubble(e);}<br /> this._Css = isdrag?{x:"left",y:"top"}:{x:"width",y:"height"}<br /> this._dragobj.style.zIndex = ++Dialog.Zindex;<br /> this._isdrag = isdrag;<br /> this._x = isdrag?(e.clientX - this._dragobj.offsetLeft||0):(this._dragobj.offsetLeft||0) ;<br /> this._y = isdrag?(e.clientY - this._dragobj.offsetTop ||0):(this._dragobj.offsetTop||0);<br /> if(isIE)<br /> {<br /> addListener(this._dragobj, "losecapture", this._fS);<br /> this._dragobj.setCapture();<br /> }<br /> else<br /> {<br /> e.preventDefault();<br /> addListener(window, "blur", this._fS);<br /> }<br /> addListener(document,'mousemove',this._fM)<br /> addListener(document,'mouseup',this._fS)<br /> },<br /> Move:function(e){<br /> window.getSelection ? window.getSelection().removeAllRanges() : document.selection.empty();<br /> var i_x = e.clientX - this._x, i_y = e.clientY - this._y;<br /> this._dragobj.style[this._Css.x] = (this._isdrag?Math.max(i_x,0):Math.max(i_x,this.Minwidth))+'px';<br /> this._dragobj.style[this._Css.y] = (this._isdrag?Math.max(i_y,0):Math.max(i_y,this.Minheight))+'px'<br /> if(!this._isdrag)<br /> this._body.style.height = Math.max(i_y -this.Titleheight,this.Minheight-this.Titleheight)-2*parseInt(CurrentStyle(this._body).paddingLeft)+'px';<br /> },<br /> Stop:function(){<br /> removeListener(document,'mousemove',this._fM);<br /> removeListener(document,'mouseup',this._fS);<br /> if(isIE)<br /> {<br /> removeListener(this._dragobj, "losecapture", this._fS);<br /> this._dragobj.releaseCapture();<br /> }<br /> else<br /> {<br /> removeListener(window, "blur", this._fS);<br /> };<br /> }<br /> })<br /> new Dialog({Width:300,Height:300,Left:300,Top:300});<br /> new Dialog({Info:"烈火学院",Content:"欢迎访问烈火学院 www.veryhuo.com"});<br /> function creat(){<br /> new Dialog({Info:title="烈火学院-标题"+i,Left:300+left,Top:300+left,Content:'欢迎访问烈火学院 www.veryhuo.com 内容'+i,Zindex:(++Dialog.Zindex)});<br /> i++;left +=10;<br /> }<br /> </script><br /> </body><br /> </html><br /><center>如不能显示效果，请按Ctrl+F5刷新本页，更多网页代码：<a href='http://www.veryhuo.com/' target='_blank'>http://www.veryhuo.com/</a></center>提示：可修改后代码再运行! 文章导航 IE9初窥：支持CSS3，和HTML5？始终在网页顶部的导航条，仿天涯顶部固定层菜单
