js控制div弹出层实现⽅法
本⽂实例讲述了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){ ElementById(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%;'><inpu //弹出窗⼝设置
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 = ateElement("div");
maskObj.setAttribute('id','maskdiv');
maskObj.style.position = "absolute";
p = "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 = ateElement("div")
msgObj.setAttribute("id","msgdiv");
msgObj.style.position ="absolute";
p = (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 = ateElement("div");
thObj.setAttribute("id","msgth");
thObj.className = "DragAble";
thObj.style.cursor = "move";
thObj.style.padding = "4px 6px";
lor = 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 = ateElement("div");
bodyObj.setAttribute("id","msgbody");
bodyObj.style.padding = "10px";
bodyObj.style.lineHeight = "1.5em";
bodyObj.innerHTML = con;
var txt = ateTextNode(content)
bodyObj.appendChild(txt);
//⽣成窗⼝
document.body.appendChild(msgObj);
$("msgdiv").appendChild(thObj);
$("msgdiv").appendChild(bodyObj);
}
function CloseMsg(){
//移除对象
veChild($("maskdiv"));
$("msgdiv").removeChild($("msgth"));
$("msgdiv").removeChild($("msgbody"));
veChild($("msgdiv"));
}
//拖动窗⼝
var ie = document.all;
var nn6 = ElementById&&!document.all;
var isdrag = false;
var y,x;
var oDragObj;
function moveMouse(e) {
if (isdrag) {
p = (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(p);
y = nn6 ? e.clientY : event.clientY;
js教程removechildnTX = parseInt(oDragObj.style.left);
x = nn6 ? e.clientX : event.clientX;
return 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程序设计有所帮助。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。