javascript 通过封装div方式弹出div窗体

网络编程 2025/5/13 佚名

3 2 1

图1（弹出一个div）

图2（弹出多个）
构造函数：
复制代码代码如下:
var DivWindow= function(popup/*最外层div id*/,popup_drag/*拖动div id*/,popup_exit/*退出按钮id*/ ,exitButton/*触发服务器端退出按钮id*/,varwidth,varheight,zindex){
this.popup =popup ;
this.height =varheight ; //窗口高度,并没用来设置窗口高度宽度，用来定位在屏幕的位置
this.width =varwidth ; //窗口宽度
this.popup_exit=popup_exit;
this.exitButton=exitButton;
this.zindex=zindex;
this.init = function(){ //初始化窗口
this.popupShow();
this.startDrag(); //设置拖动
this.setCommond(); //设置关闭
DivWindow.ArrayW.push(document.getElementById(this.popup)); //存储窗口到数组
};this.init();
};

调用：
复制代码代码如下:
<input type="button" id="show" onclick="javascript:new DivWindow('popup','popup_drag','popup_exit','exitButton','500','700',4);" value='触发弹出详细基本资料DIV' />

有的地方可能大家觉得有点奇怪，不要问我问什么，因为我有这个需要，有时间再修改一下遮罩效果。更详细代码请见下载
完整代码
<!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> <title>窗口类 </title> <meta http-equiv="Content-Type" content="text/html;charset=gb2312" /> <style type="text/css"> .mask{position: absolute; top: 0px; left: 0px; filter: alpha(opacity=50); -moz-opacity:0.5; opacity:0.5; background-color: #ffffff; z-index: 2; display: none;} /* 弹出基本资料div */ div.sample_popup {height:auto; border: 1px solid #327eca; width: 300px; } div.menu_form_header{ background: url('../images/baseInfo/titleBG.gif') repeat-x; } div.sample_popup div.menu_form_header { border-bottom: 0px; cursor: default; width:100%; height: 22px; line-height: 22px; vertical-align: middle; text-decoration: none; font-family: "Times New Roman", Serif; font-weight: 800; font-size: 13px; color: #206040; } div.menu_form_body { width:100%; height:150px; font-size:12px; background-color:#f1f8fe; } div.sample_popup input.menu_form_exit { float: right; margin: 4px 5px 0px 0px; cursor: pointer; } /*end: 弹出商品信息div */ </style> <script type="text/javascript"> /************************************************** * DivWindow.js **************************************************/ var DivWindow= function(popup/*最外层div id*/,popup_drag/*拖动div id*/,popup_exit/*退出按钮id*/ ,exitButton/*触发服务器端退出按钮id*/,varwidth,varheight,zindex){ this.popup =popup ; //窗口名称 this.height =varheight ; //窗口高度，并没用来设置窗口高度宽度，用来定位在屏幕的位置 this.width =varwidth ; //窗口宽度 this.popup_exit=popup_exit; this.exitButton=exitButton; this.zindex=zindex; this.init = function(){ //初始化窗口 this.popupShow(); this.startDrag(); //设置拖动 this.setCommond(); //设置关闭 DivWindow.ArrayW.push(document.getElementById(this.popup)); //存储窗口到数组 };this.init(); }; //存储窗口到数组 DivWindow.ArrayW = new Array(); //字符串连接类 DivWindow.StringBuild = function(){ this.arr = new Array(); this.push = function(str){ this.arr.push(str); }; this.toString = function(){ return this.arr.join(""); }; }; //拖动类 DivWindow.Drag = function(o ,oRoot){ var _self = this; //拖动对象 this.obj = (typeof oRoot != "undefined") ?oRoot : o; this.relLeft = 0; //记录横坐标 this.relTop = 0; //记录纵坐标 o.onselectstart = function(){ return false; }; o.onmousedown = function(e){ //鼠标按下 e = _self.fixE(e); _self.relLeft = e.clientX - _self.fixU(_self.obj.style.left); _self.relTop = e.clientY - _self.fixU(_self.obj.style.top); document.onmousemove = function(e){ _self.drag(e); //_self.obj.style.border = "1px dashed #000000"; //_self.obj.style.filter = "alpha(opacity=30)"; //_self.obj.style.opacity = "0.3"; }; document.onmouseup = function(){ _self.end(); //_self.obj.style.border = "1px solid #cccccc"; //_self.obj.style.borderBottom = "2px solid #E0E0E0"; //_self.obj.style.borderRight = "2px solid #E0E0E0"; //_self.obj.style.filter = "alpha(opacity=100)"; //_self.obj.style.opacity = "1"; }; }; this.drag = function(e){ //拖动 e = this.fixE(e); var l = e.clientX - this.relLeft; var t = e.clientY - this.relTop; if (t < 0) { t = 0; //防止头部消失 } this.obj.style.left = l +"px"; this.obj.style.top = t +"px"; }; this.end = function(){ //结束拖动 document.onmousemove = null; document.onmouseup = null; }; this.fixE = function(e){ //修复事件 if (typeof e == "undefined") e = window.event; return e; }; this.fixU = function(u){ //处理px单位 return parseInt(u.split("p")[0]); }; }; //窗口拖动 DivWindow.prototype.startDrag = function(){ var obj = document.getElementById(this.popup); new DivWindow.Drag(obj.childNodes[0] ,obj); }; //设定窗口优先级 DivWindow.prototype.setTop = function(){ document.getElementById(this.popup).onclick = document.getElementById(this.popup).onmousedown = function(){ for(var i=0;i </head> <body> sffs <input type="button" id="show" onclick="javascript:new DivWindow('popup','popup_drag','popup_exit','exitButton','500','700',4);" value='触发弹出详细基本资料DIV' /> <input type="button" id="exitButton" value="aaaa" /> <input type="button" id="popup_exit" value="退出" /> 片区资料片区名称：<input type="button" id="Button1" onclick="javascript:new DivWindow('Div1','Div2','exit2','exitButton','500','700',5);" value='触发弹出详细基本资料DIV2' /> <input type="button" id="exit2" value="退出" /> 片区资料2222 片区名称：yj </body> </html>
[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]
打包下载

弹出div

标签：

弹出div

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“javascript 通过封装div方式弹出div窗体”

javascript 通过封装div方式弹出div窗体

暂无“javascript 通过封装div方式弹出div窗体”评论...

www.imxmx.com 杰晶网络

8,675无损音乐

1,324高清电影

213破解软件

120,141站长资源

javascript 通过封装div方式弹出div窗体

弹出div

JScript 脚本实现文件下载一般用于下载木马

javascript 面向对象,实现namespace,class,继承，重载

评论“javascript 通过封装div方式弹出div窗体”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新动态

友情链接

javascript 通过封装div方式弹出div窗体

弹出div

JScript 脚本实现文件下载 一般用于下载木马

javascript 面向对象,实现namespace,class,继承，重载

评论“javascript 通过封装div方式弹出div窗体”

稳了！魔兽国服回归的3条重磅消息！官宣时间再确认！

更新动态

友情链接

JScript 脚本实现文件下载一般用于下载木马