帝王谷资源网 Design By www.wdxyy.com
本文实例讲述了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,弹出,浮动框
帝王谷资源网 Design By www.wdxyy.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
免责声明:本站文章均来自网站采集或用户投稿,网站不提供任何软件下载或自行开发的软件! 如有用户或公司发现本站内容信息存在侵权行为,请邮件告知! 858582#qq.com
帝王谷资源网 Design By www.wdxyy.com
暂无评论...
P70系列延期,华为新旗舰将在下月发布
3月20日消息,近期博主@数码闲聊站 透露,原定三月份发布的华为新旗舰P70系列延期发布,预计4月份上市。
而博主@定焦数码 爆料,华为的P70系列在定位上已经超过了Mate60,成为了重要的旗舰系列之一。它肩负着重返影像领域顶尖的使命。那么这次P70会带来哪些令人惊艳的创新呢?
根据目前爆料的消息来看,华为P70系列将推出三个版本,其中P70和P70 Pro采用了三角形的摄像头模组设计,而P70 Art则采用了与上一代P60 Art相似的不规则形状设计。这样的外观是否好看见仁见智,但辨识度绝对拉满。
更新日志
2024年10月31日
2024年10月31日
- 群星.2009-田野的春天徐沛东精选作品集【太平洋影音】【WAV+CUE】
- 蔡琴-闽南语十年精选[吉马引进版][WAV+CUE整轨]
- 赵鹏-《王者無疆》Hi-Res24-96[FLAC]
- 赵鹏《我的神话》Hi-Res[24bit-96kHz]【flac】
- 五月天《后青春期的诗》[FLAC][1.91G]
- 伍佰 《伍佰精选-滚石香港黄金十年》 [FLAC 192kHz 24bit][2.5G]
- 许巍《时光漫步》 [FLAC][1.7G]
- 月光鳍用什么鱼饵?月光鳍鱼饵介绍一览
- 三神之眼是什么介绍,三神之眼有什么用
- 【原神】V5.1攻略 |「胡桃」一图流丨角色解析攻略
- 《龙腾世纪4》IGN高分引争议:玩家点踩数破两万五
- 《暗喻幻想》全球销量破百万!官方发布荣誉宣传片
- 《龙腾世纪4》10月31日发售 还能创建变性人角色!
- 李知恩IU-Palette[Hi-Res24bit-96khz]-2017FLAC
- 乡村民谣女声发烧精讯Acoustic.Audiophile.Voices》2004[低速原抓WAV+CUE]