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.jstitle:提示标题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程序设计有所帮助。