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 相关文章推荐
前端开发的开始---基于面向对象的Ajax类
Sep 17 Javascript
Javascript 中创建自定义对象的方法汇总
Dec 04 Javascript
Jquery判断form表单数据是否变化
Mar 30 Javascript
什么是JavaScript注入攻击?
Sep 14 Javascript
js实现的在线调色板功能完整实例
Dec 21 Javascript
用JavaScript实现让浏览器停止载入页面的方法
Jan 19 Javascript
jQuery使用siblings获取某元素所有同辈(兄弟姐妹)元素用法示例
Jan 30 Javascript
Android中Okhttp3实现上传多张图片同时传递参数
Feb 18 Javascript
整理关于Bootstrap过渡动画的慕课笔记
Mar 29 Javascript
vue中父子组件注意事项,传值及slot应用技巧
May 09 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
JS常用排序方法实例代码解析
Mar 03 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
咖啡磨器 如何选购一台适合家用的意式磨豆机
2021/03/05 新手入门
PHP面向对象学习之parent::关键字
2017/01/18 PHP
javascript 新浪背投广告实现代码
2009/07/07 Javascript
jQuery之按钮组件的深入解析
2013/06/19 Javascript
JavaScript中判断变量是数组、函数或是对象类型的方法
2015/02/25 Javascript
jquery 插件实现多行文本框[textarea]自动高度
2015/03/04 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
JS简单编号生成器实现方法(附demo源码下载)
2016/04/05 Javascript
angular实现form验证实例代码
2017/01/17 Javascript
详谈js中window.location.search的用法和作用
2017/02/13 Javascript
详解基于Vue+Koa的pm2配置
2017/10/24 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
node.js到底要不要加分号浅析
2018/07/11 Javascript
JavaScript实现单英文金山打字通
2020/07/24 Javascript
layui 选择列表,打勾,点击确定返回数据的例子
2019/09/02 Javascript
Vue中import from的来源及省略后缀与加载文件夹问题
2020/02/09 Javascript
小程序实现录音功能
2020/09/22 Javascript
Python自定义scrapy中间模块避免重复采集的方法
2015/04/07 Python
使用Python的Bottle框架写一个简单的服务接口的示例
2015/08/25 Python
Python时间戳使用和相互转换详解
2017/12/11 Python
Python如何生成树形图案
2018/01/03 Python
python3.6下Numpy库下载与安装图文教程
2019/04/02 Python
pycharm新建一个python工程步骤
2019/07/16 Python
JD Sports荷兰:英国领先的运动时尚零售商
2020/03/13 全球购物
New delete 与malloc free 的联系与区别
2013/02/04 面试题
高中毕业生自我鉴定范文
2013/09/26 职场文书
就业推荐自我鉴定
2013/10/06 职场文书
临床医学系毕业生推荐信
2013/11/09 职场文书
普通院校学生的自荐信
2013/11/27 职场文书
小学家长评语大全
2014/04/16 职场文书
二年级小学生评语
2014/04/21 职场文书
小学思想品德教学反思
2016/02/24 职场文书
详解Mysql 函数调用优化
2021/04/07 MySQL
7个你应该知道的JS原生错误类型
2021/04/29 Javascript
Python图片验证码降噪和8邻域降噪
2021/08/30 Python
Python实现学生管理系统并生成exe可执行文件详解流程
2022/01/22 Python