js控制div弹出层实现方法
本文实例讲述了js控制div弹出层实现方法。分享给大家供大家参考。具体分析如下：
这是个功能很好，且容易调用和控制的弹出层。感兴趣的朋友可以调试运行一下看看效果如何~O(∩_∩)O~
<html>
<head>
<metahttp-equiv="Content-Type"content="text/html;charset=utf-8"/>
<title>弹出窗口(可拖动，背景灰色透明)</title>
<scripttype="text/javascript">
<!--
/*FileName:AlertMsg.js
title:提示标题
content:提示的内容*/
document.write("<styletype=\"text/css\">*{padding:0;margin:0}.close{float:right;cursor:default}</style>")
function$(id){returndocument.getElementById(id)}
functionAlertMsg(title,content){
varmsgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con;
con="<form><tablestyle='margin:10px15px15px15px;border:0;'><tr><thstyle='border:0;line-height:22px;padding:3px0;vertical-align:top;font-weight:bold;'>分类：</th><tdstyle='border:0;line-height:22px;padding:3px0;vertical-align:top;width:75%;'><inputtype='text'name='typename'size='20'/></td></tr><tr><th></th><tdstyle='border:0;line-height:22px;padding:3px0;vertical-align:top;width:75%;'><buttonstyle='line-height:normal;'type='submit'onclick='returnsubmitform()'>确定</button><buttonstyle='line-height:normal;'type='reset'>取消</button></td></tr></table></form>";
//弹出窗口设置
msgw=300;//窗口宽度
msgh=150;//窗口高度
msgbg="#FFF";//内容背景
msgcolor="#000";//内容颜色
bordercolor="#000";//边框颜色
titlecolor="#FFF";//标题颜色
titlebg="#369";//标题背景
//遮罩背景设置
varsWidth,sHeight;
sWidth=screen.availWidth;
sHeight=document.body.scrollHeight;
//创建遮罩背景
varmaskObj=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);
//创建弹出窗口
varmsgObj=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="1pxsolid"+bordercolor;
msgObj.style.zIndex="10001";
//创建标题
varthObj=document.createElement("div");
thObj.setAttribute("id","msgth");
thObj.className="DragAble";
thObj.style.cursor="move";
thObj.style.padding="4px6px";
thObj.style.color=titlecolor;
thObj.style.background=titlebg;
vartitleStr="<aclass='close'title='关闭'style='cursor:pointer'onclick='CloseMsg()'>关闭</a>"+"<span>"+title+"</span>";
thObj.innerHTML=titleStr;
//创建内容
varbodyObj=document.createElement("div");
bodyObj.setAttribute("id","msgbody");
bodyObj.style.padding="10px";
bodyObj.style.lineHeight="1.5em";
bodyObj.innerHTML=con;
vartxt=document.createTextNode(content)
bodyObj.appendChild(txt);
//生成窗口
document.body.appendChild(msgObj);
$("msgdiv").appendChild(thObj);
$("msgdiv").appendChild(bodyObj);
}
functionCloseMsg(){
//移除对象
document.body.removeChild($("maskdiv"));
$("msgdiv").removeChild($("msgth"));
$("msgdiv").removeChild($("msgbody"));
document.body.removeChild($("msgdiv"));
}
//拖动窗口
varie=document.all;
varnn6=document.getElementById&&!document.all;
varisdrag=false;
vary,x;
varoDragObj;
functionmoveMouse(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";
returnfalse;
}
}
functioninitDrag(e){
varoDragHandle=nn6?e.target:event.srcElement;
vartopElement="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;
returnfalse;
}
}
document.onmousedown=initDrag;
document.onmouseup=newFunction("isdrag=false");
//-->
</script>
</head>
<body>
<tablewidth="600"border="0"cellspacing="0"cellpadding="0">
<tr>
<tdheight="100"align="center">
<p><ahref="javascript:AlertMsg("温馨提示",'')">点我试试!</a></p>
</td>
</tr>
</table>
</div>
</body>
</html>
希望本文所述对大家的javascript程序设计有所帮助。