js控制div弹出层实现方法

2019-11-20 12:30:27

字体：大中小

来源：转载

供稿：网友

本文实例讲述了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程序设计有所帮助。

上一篇：jQuery子窗体取得父窗体元素的方法

下一篇：JavaScript实现点击文字切换登录窗口的方法