DIV+CSS+JS 变灰弹出层

浮动层居中的对话框效果演示

<！DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"> <HTML xml:lang="zn" xmlns="http://www.w3.org/1999/xhtml"> <HEAD> <TITLE>浮动层居中的对话框效果演示</TITLE> <FCK:META http-equiv=content-type content="application/xhtml+xml; charset=gb2312" /> <STYLE type=text/css> HTML { HEIGHT: 100% } BODY { HEIGHT: 100% } BODY { FONT-SIZE: 14px; FONT-FAMILY: Tahoma, Verdana, sans-serif } DIV.neat-dialog-cont { Z-INDEX: 98; BACKGROUND: none transparent scroll repeat 0% 0%; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100% } DIV.neat-dialog-bg { Z-INDEX: -1; FILTER: alpha（opacity=70）; LEFT: 0px; WIDTH: 100%; POSITION: absolute; TOP: 0px; HEIGHT: 100%; BACKGROUND-COLOR: #eee; opacity: 0.7 } DIV.neat-dialog { BORDER-RIGHT: #555 1px solid; BORDER-TOP: #555 1px solid; Z-INDEX: 99; MARGIN-LEFT: auto; BORDER-LEFT: #555 1px solid; WIDTH: 30%; MARGIN-RIGHT: auto; BORDER-BOTTOM: #555 1px solid; POSITION: relative; TOP: 25%; BACKGROUND-COLOR: #fff } DIV.neat-dialog-title { PADDING-RIGHT: 0.3em; PADDING-LEFT: 0.3em; FONT-SIZE: 0.8em; PADDING-BOTTOM: 0.1em; MARGIN: 0px; LINE-HEIGHT: 1.2em; PADDING-TOP: 0.1em; BORDER-BOTTOM: #444 1px solid; POSITION: relative } IMG.nd-cancel { RIGHT: 0.2em; POSITION: absolute; TOP: 0.2em } DIV.neat-dialog P { PADDING-RIGHT: 0.2em; PADDING-LEFT: 0.2em; PADDING-BOTTOM: 0.2em; PADDING-TOP: 0.2em; TEXT-ALIGN: center } </STYLE> <SCRIPT type=text/javascript> function NeatDialog（sHTML, sTitle, bCancel） { window.neatDialog = null; this.elt = null; if （document.createElement && document.getElementById） { var dg = document.createElement（"div"）; dg.className = "neat-dialog"; if （sTitle） sHTML = ""+sTitle+ （（bCancel）？ "<img src="x.gif" alt="Cancel" class="nd-cancel" />":""）+ "
" + sHTML; dg.innerHTML = sHTML; var dbg = document.createElement（"div"）; dbg.id = "nd-bdg"; dbg.className = "neat-dialog-bg"; var dgc = document.createElement（"div"）; dgc.className = "neat-dialog-cont"; dgc.appendChild（dbg）; dgc.appendChild（dg）; //adjust positioning if body has a margin if （document.body.offsetLeft > 0） dgc.style.marginLeft = document.body.offsetLeft + "px"; document.body.appendChild（dgc）; if （bCancel） document.getElementById（"nd-cancel"）.onclick = function（） { window.neatDialog.close（）; }; this.elt = dgc; window.neatDialog = this; } } NeatDialog.prototype.close = function（） { if （this.elt） { this.elt.style.display = "none"; this.elt.parentNode.removeChild（this.elt）; } window.neatDialog = null; } function openDialog（） { var sHTML = "你现在看到的是一个层窗口，是被JS控制弹出的，www.jb51.net脚本之家！<br/>"+ "<button onclick="window.neatDialog.close（）">关闭</button><br/>"; new NeatDialog（sHTML, "欢迎光临！", false）; } </SCRIPT> <BODY> <H1>浮动层居中的效果</H1> <BUTTON onclick=openDialog（）>点此演示效果</BUTTON> </BODY></HTML>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]