JS模拟Dialog弹出浮动框效果代码


Posted in Javascript onOctober 16, 2015

本文实例讲述了JS模拟Dialog弹出浮动框效果代码。分享给大家供大家参考。具体如下:

这里演示JS模拟Dialog弹出浮动框,蓝色经典风格,可以创建一个新层,可设置弹出层的标题和内容,用它可实现一个登录框,或用在后台管理中。

运行效果截图如下:

JS模拟Dialog弹出浮动框效果代码

在线演示地址如下:

具体代码如下:

<!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) ? true : false;
var $ = function (id) {
 return document.getElementById(id);
};
var Extend = function(destination, source) {
 for (var property in source) {
 destination[property] = source[property];
 }
}
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 : "新闻标题",
 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?(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){
  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:"人族",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程序设计有所帮助。

Javascript 相关文章推荐
动态加载iframe
Jun 16 Javascript
php gethostbyname获取域名ip地址函数详解
Jan 24 Javascript
关于JavaScript的with 语句的使用方法
May 09 Javascript
js实现的map方法示例代码
Jan 13 Javascript
JS+CSS实现仿雅虎另类滑动门切换效果
Oct 13 Javascript
jQuery实现订单提交页发送短信功能前端处理方法
Jul 04 Javascript
浅谈angularJS的$watch失效问题的解决方案
Aug 11 Javascript
jquery tmpl模板(实例讲解)
Sep 02 jQuery
浅谈VUE监听窗口变化事件的问题
Feb 24 Javascript
使用vue中的v-for遍历二维数组的方法
Mar 07 Javascript
vue如何解决循环引用组件报错的问题
Sep 22 Javascript
vue项目,代码提交至码云,iconfont的用法说明
Jul 30 Javascript
JS实现仿腾讯微博无刷新删除微博效果代码
Oct 16 #Javascript
解决JS请求服务器gbk文件乱码的问题
Oct 16 #Javascript
jQuery实现简易的天天爱消除小游戏
Oct 16 #Javascript
两款JS脚本判断手机浏览器类型跳转WAP手机网站
Oct 16 #Javascript
纯JavaScript代码实现移动设备绘图解锁
Oct 16 #Javascript
JS实现可自定义大小,可双击关闭的弹出层效果
Oct 16 #Javascript
javascript实现3D切换焦点图
Oct 16 #Javascript
You might like
PHP实现MySQL更新记录的代码
2008/06/07 PHP
PHP判断FORM表单或URL参数来的数据是否为整数的方法
2016/03/25 PHP
PHP实现批量检测网站是否能够正常打开的方法
2016/08/23 PHP
laravel5.2表单验证,并显示错误信息的实例
2019/09/29 PHP
prototype class详解
2006/09/07 Javascript
JavaScript iframe的相互操作浅析
2009/10/14 Javascript
js面向对象 多种创建对象方法小结
2012/05/21 Javascript
javascript动态加载二
2012/08/22 Javascript
JS上传前预览图片实例
2013/03/25 Javascript
基于jQuery实现的文字按钮表单特效整理
2014/12/07 Javascript
js实现的黑背景灰色二级导航菜单效果代码
2015/08/24 Javascript
AngularJS 中的事件详解
2016/07/28 Javascript
bootstrapValidator表单验证插件学习
2016/12/30 Javascript
AngularJS的Filter的示例详解
2017/03/07 Javascript
详解SPA中前端路由基本原理与实现方式
2018/09/12 Javascript
vue搜索和vue模糊搜索代码实例
2019/05/07 Javascript
Node.js之删除文件夹(含递归删除)代码实例
2019/09/09 Javascript
基于Vue+ElementUI的省市区地址选择通用组件
2019/11/20 Javascript
Javascript模块化机制实现原理详解
2020/04/02 Javascript
vue实现把接口单独存放在一个文件方式
2020/08/13 Javascript
三步搞定:Vue.js调用Android原生操作
2020/09/07 Javascript
[00:43]DOTA2小紫本全民票选福利PA至宝全方位展示
2014/11/25 DOTA
[54:10]完美世界DOTA2联赛PWL S2 Magma vs FTD 第二场 11.29
2020/12/03 DOTA
浅谈python中scipy.misc.logsumexp函数的运用场景
2016/06/23 Python
Python 专题二 条件语句和循环语句的基础知识
2017/03/19 Python
使用Python实现分别输出每个数组
2019/12/06 Python
jupyter notebook oepncv 显示一张图像的实现
2020/04/24 Python
python3.7 openpyxl 在excel单元格中写入数据实例
2020/09/01 Python
使用html5+css3来实现slider切换效果告别javascript+css
2013/01/08 HTML / CSS
美国诺德斯特龙百货官网:Nordstrom
2016/08/23 全球购物
日本最大美瞳直送网:Morecontact(中文)
2019/04/03 全球购物
香港百佳网上超级市场:PARKNSHOP.com
2020/06/10 全球购物
编辑硕士自荐信范文
2013/11/27 职场文书
协议书的格式
2014/04/23 职场文书
2016年大学自主招生自荐信范文
2015/03/24 职场文书
Win11 S Mode版本泄露 正式上线后叫做Windows 11 SE
2021/11/21 数码科技