快捷導(dǎo)航

js控制div彈出層實現(xiàn)方法

更新時間：2015年05月11日 14:39:15 作者：fanyuna

這篇文章主要介紹了js控制div彈出層實現(xiàn)方法,可實現(xiàn)點擊鏈接彈出div浮動層,且背景色變暗的效果,是一款非常實用的特效源碼,需要的朋友可以參考下

本文實例講述了js控制div彈出層實現(xiàn)方法。分享給大家供大家參考。具體分析如下：

這是個功能很好，且容易調(diào)用和控制的彈出層。感興趣的朋友可以調(diào)試運行一下看看效果如何~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:提示標(biāo)題
content:提示的內(nèi)容*/
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>";
//彈出窗口設(shè)置
msgw = 300;  //窗口寬度
msgh = 150;  //窗口高度
msgbg = "#FFF";  //內(nèi)容背景
msgcolor = "#000";  //內(nèi)容顏色
bordercolor = "#000"; //邊框顏色
titlecolor = "#FFF"; //標(biāo)題顏色
titlebg = "#369";  //標(biāo)題背景
//遮罩背景設(shè)置
var sWidth,sHeight;
sWidth = screen.availWidth;
sHeight = document.body.scrollHeight;
//創(chuàng)建遮罩背景
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);
//創(chuàng)建彈出窗口
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";
//創(chuàng)建標(biāo)題
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='關(guān)閉' style='cursor:pointer' onclick='CloseMsg()'>關(guān)閉</a>"+"<span>"+ title +"</span>";
thObj.innerHTML = titleStr;
//創(chuàng)建內(nèi)容
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(&quot;溫馨提示&quot;,'')">點我試試!</a></p>
  </td>
 </tr>
</table>
</div>
</body>
</html>

希望本文所述對大家的javascript程序設(shè)計有所幫助。

您可能感興趣的文章: