js控制div弹出层实现方法

前端技术 2023/09/05 JavaScript

本文实例讲述了js控制div弹出层实现方法。分享给大家供大家参考。具体分析如下：

这是个功能很好，且容易调用和控制的弹出层。感兴趣的朋友可以调试运行一下看看效果如何~O(∩_∩)O~

<html>
<head>
<meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\" />
<title>弹出窗口(可拖动，背景灰色透明)</title>
<script type=\"text/javascript\">
<!--
/*FileName:AlertMsg.js
title:提示标题
content:提示的内容*/
document.write(\"<style type=\\\"text/css\\\">*{padding:0; margin:0}.close{float:right;cursor:default}</style>\")
function $(id){ return document.getElementById(id)}
function AlertMsg(title,content){
var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con;
con = \"<form><table style=\'margin:10px 15px 15px 15px; border:0;\'><tr><th style=\'border:0; line-height:22px; padding:3px 0; vertical-align:top;font-weight:bold;\'>分类：</th><td style=\'border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75%;\'><input type=\'text\' name=\'typename\' size=\'20\'/></td></tr><tr><th></th><td style=\'border:0; line-height:22px; padding:3px 0; vertical-align:top;width:75%;\'><button style=\'line-height:normal;\' type=\'submit\' onclick=\'return submitform()\'>确定</button>　<button style=\'line-height:normal;\' type=\'reset\'>取消</button></td></tr></table></form>\";
//弹出窗口设置
msgw = 300;  //窗口宽度
msgh = 150;  //窗口高度
msgbg = \"#FFF\";  //内容背景
msgcolor = \"#000\";  //内容颜色
bordercolor = \"#000\"; //边框颜色
titlecolor = \"#FFF\"; //标题颜色
titlebg = \"#369\";  //标题背景
//遮罩背景设置
var sWidth,sHeight;
sWidth = screen.availWidth;
sHeight = document.body.scrollHeight;
//创建遮罩背景
var maskObj = document.createElement(\"div\");
maskObj.setAttribute(\'id\',\'maskdiv\');
maskObj.style.position = \"absolute\";
maskObj.style.top = \"0\";
maskObj.style.left = \"0\";
maskObj.style.background = \"#777\";
maskObj.style.filter = \"Alpha(opacity=30);\";
maskObj.style.opacity = \"0.3\";
maskObj.style.width = sWidth + \"px\";
maskObj.style.height = sHeight + \"px\";
maskObj.style.zIndex = \"10000\";
document.body.appendChild(maskObj);
//创建弹出窗口
var msgObj = document.createElement(\"div\")
msgObj.setAttribute(\"id\",\"msgdiv\");
msgObj.style.position =\"absolute\";
msgObj.style.top = (screen.availHeight - msgh) / 4 + \"px\";
msgObj.style.left = (screen.availWidth - msgw) / 2 + \"px\";
msgObj.style.width = msgw + \"px\";
msgObj.style.height = msgh + \"px\";
msgObj.style.fontSize = \"12px\";
msgObj.style.background = msgbg;
msgObj.style.border = \"1px solid \" + bordercolor;
msgObj.style.zIndex = \"10001\";
//创建标题
var thObj = document.createElement(\"div\");
thObj.setAttribute(\"id\",\"msgth\");
thObj.className = \"DragAble\";
thObj.style.cursor = \"move\";
thObj.style.padding = \"4px 6px\";
thObj.style.color = titlecolor;
thObj.style.background = titlebg;
var titleStr = \"<a class=\'close\' title=\'关闭\' style=\'cursor:pointer\' onclick=\'CloseMsg()\'>关闭</a>\"+\"<span>\"+ title +\"</span>\";
thObj.innerHTML = titleStr;
//创建内容
var bodyObj = document.createElement(\"div\");
bodyObj.setAttribute(\"id\",\"msgbody\");
bodyObj.style.padding = \"10px\";
bodyObj.style.lineHeight = \"1.5em\";
bodyObj.innerHTML = con;
var txt = document.createTextNode(content)
bodyObj.appendChild(txt);
//生成窗口
document.body.appendChild(msgObj);
$(\"msgdiv\").appendChild(thObj);
$(\"msgdiv\").appendChild(bodyObj);
}
function CloseMsg(){
//移除对象
document.body.removeChild($(\"maskdiv\"));
$(\"msgdiv\").removeChild($(\"msgth\"));
$(\"msgdiv\").removeChild($(\"msgbody\"));
document.body.removeChild($(\"msgdiv\"));
}
//拖动窗口
var ie = document.all;  
var nn6 = document.getElementById&&!document.all;  
var isdrag = false;  
var y,x;  
var oDragObj;  
function moveMouse(e) {  
if (isdrag) {  
oDragObj.style.top = (nn6 ? nTY + e.clientY - y : nTY + event.clientY - y)+\"px\";  
oDragObj.style.left = (nn6 ? nTX + e.clientX - x : nTX + event.clientX - x)+\"px\";  
return false;  
}  
}  
function initDrag(e) {  
var oDragHandle = nn6 ? e.target : event.srcElement;  
var topElement = \"HTML\";  
while (oDragHandle.tagName != topElement && oDragHandle.className != \"DragAble\") {  
oDragHandle = nn6 ? oDragHandle.parentNode : oDragHandle.parentElement;  
}  
if (oDragHandle.className==\"DragAble\") {  
isdrag = true;  
oDragObj = oDragHandle.parentNode;  
nTY = parseInt(oDragObj.style.top);  
y = nn6 ? e.clientY : event.clientY;  
nTX = parseInt(oDragObj.style.left);  
x = nn6 ? e.clientX : event.clientX;  
document.onmousemove = moveMouse;  
return false;  
}  
}  
document.onmousedown = initDrag;  
document.onmouseup = new Function(\"isdrag=false\");  
//-->
</script>
</head>
<body>
<table width=\"600\" border=\"0\" cellspacing=\"0\" cellpadding=\"0\">
 <tr >
  <td height=\"100\" align=\"center\" >
<p><a href=\"javascript:AlertMsg(\"温馨提示\",\'\')\">点我试试!</a></p>
  </td>
 </tr>
</table>
</div>
</body>
</html>

希望本文所述对大家的javascript程序设计有所帮助。

本文地址：https://www.stayed.cn/item/14427

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案