本文实例讲述了JS模拟Dialog弹出浮动框效果代码。分享给大家供大家参考。具体如下：
这里演示JS模拟Dialog弹出浮动框，蓝色经典风格，可以创建一个新层，可设置弹出层的标题和内容，用它可实现一个登录框，或用在后台管理中。
运行效果截图如下：
在线演示地址如下：
http://demo.jb51.net/js/2015/js-mn-dialog-float-dlg-style-demo/
具体代码如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<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(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>
</head>
<body >
<input value="创建" type="button" onclick="creat()" />
<div id='aa'></div>
<script>
var z=1,i=1,left=10
var isIE = (document.all) "on" + e,fn)};
function removeListener(element,e,fn){ element.removeEventListener"on" + e,fn)};
var Class = function(properties){
var _class = function(){return (arguments[0] !== null && this.initialize && typeof(this.initialize) == 'function') "新闻标题",
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
//构造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
////设置Dialog的长 宽 ,left ,top
with(this._dragobj.style){
height = this.Height + "px";top = this.Top + "px";width = this.Width +"px";left = this.Left + "px";zIndex = this.Zindex;
}
this._body.style.height = this.Height - this.Titleheight-parseInt(CurrentStyle(this._body).paddingLeft)*2+'px';
/////////////////////////////////////////////////////////////////////////////// 添加事件
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"left",y:"top"}:{x:"width",y:"height"}
this._dragobj.style.zIndex = ++Dialog.Zindex;
this._isdrag = isdrag;
this._x = isdrag"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 "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:"人族",Content:"人族很强吗"});
function creat(){
new Dialog({Info:title="标题"+i,Left:300+left,Top:300+left,Content:'内容'+i,Zindex:(++Dialog.Zindex)});
i++;left +=10;
}
</script>
</body>
</html>
希望本文所述对大家的JavaScript程序设计有所帮助。
标签：
JS,Dialog,弹出,浮动框
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
桃源资源网 Design By www.nqtax.com
暂无“JS模拟Dialog弹出浮动框效果代码”评论...