php弹出div,js控制div弹出层实现方法

本文实例讲述了js控制div弹出层实现方法。分享给大家供大家参考。具体分析如下：

这是个功能很好，且容易调用和控制的弹出层。感兴趣的朋友可以调试运行一下看看效果如何~O(∩_∩)O~

弹出窗口(可拖动，背景灰色透明)*{padding:0; margin:0}.close{float:right;cursor:default}")

function $(id){ return document.getElementById(id)}

function AlertMsg(title,content){

var msgw,msgh,msgbg,msgcolor,bordercolor,titlecolor,titlebg,con;

con = "分类：确定　取消";

//弹出窗口设置

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 = "关闭"+""+ title +"";

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");

//-->

" _ue_custom_node_="true">

本文原创发布php中文网，转载请注明出处，感谢您的尊重！