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> 
<img src="/_New/_cj/myeditor/sysimage/space.gif" class="ewebeditor__script" _ewebeditor_fake_tag="script" _ewebeditor_fake_value="%3CSCRIPT%20type%3Dtext%2Fjavascript%3E%20%0D%0Afunction%20NeatDialog(sHTML%2C%20sTitle%2C%20bCancel)%20%0D%0A%7B%20%0D%0Awindow.neatDialog%20%3D%20null%3B%20%0D%0Athis.elt%20%3D%20null%3B%20%0D%0Aif%20(document.createElement%20%26%26%20document.getElementById)%20%0D%0A%7B%20%0D%0Avar%20dg%20%3D%20document.createElement(%22div%22)%3B%20%0D%0Adg.className%20%3D%20%22neat-dialog%22%3B%20%0D%0Aif%20(sTitle)%20%0D%0AsHTML%20%3D%20'%3Cdiv%20class%3D%22neat-dialog-title%22%3E'%2BsTitle%2B%20%0D%0A((bCancel)%3F%20%0D%0A'%3Cimg%20src%3D%22x.gif%22%20alt%3D%22Cancel%22%20class%3D%22nd-cancel%22%20%2F%3E'%3A'')%2B%20%0D%0A'%3C%2Fdiv%3E%5Cn'%20%2B%20sHTML%3B%20%0D%0Adg.innerHTML%20%3D%20sHTML%3B%20%0D%0A%0D%0Avar%20dbg%20%3D%20document.createElement(%22div%22)%3B%20%0D%0Adbg.id%20%3D%20%22nd-bdg%22%3B%20%0D%0Adbg.className%20%3D%20%22neat-dialog-bg%22%3B%20%0D%0A%0D%0Avar%20dgc%20%3D%20document.createElement(%22div%22)%3B%20%0D%0Adgc.className%20%3D%20%22neat-dialog-cont%22%3B%20%0D%0Adgc.appendChild(dbg)%3B%20%0D%0Adgc.appendChild(dg)%3B%20%0D%0A%0D%0A%2F%2Fadjust%20positioning%20if%20body%20has%20a%20margin%20%0D%0Aif%20(document.body.offsetLeft%20%3E%200)%20%0D%0Adgc.style.marginLeft%20%3D%20document.body.offsetLeft%20%2B%20%22px%22%3B%20%0D%0A%0D%0Adocument.body.appendChild(dgc)%3B%20%0D%0Aif%20(bCancel)%20document.getElementById(%22nd-cancel%22).onclick%20%3D%20function()%20%0D%0A%7B%20%0D%0Awindow.neatDialog.close()%3B%20%0D%0A%7D%3B%20%0D%0Athis.elt%20%3D%20dgc%3B%20%0D%0Awindow.neatDialog%20%3D%20this%3B%20%0D%0A%7D%20%0D%0A%7D%20%0D%0ANeatDialog.prototype.close%20%3D%20function()%20%0D%0A%7B%20%0D%0Aif%20(this.elt)%20%0D%0A%7B%20%0D%0Athis.elt.style.display%20%3D%20%22none%22%3B%20%0D%0Athis.elt.parentNode.removeChild(this.elt)%3B%20%0D%0A%7D%20%0D%0Awindow.neatDialog%20%3D%20null%3B%20%0D%0A%7D%20%0D%0A%0D%0Afunction%20openDialog()%20%0D%0A%7B%20%0D%0A%0D%0Avar%20sHTML%20%3D%20'%3Cp%3E%E4%BD%A0%E7%8E%B0%E5%9C%A8%E7%9C%8B%E5%88%B0%E7%9A%84%E6%98%AF%E4%B8%80%E4%B8%AA%E5%B1%82%E7%AA%97%E5%8F%A3%EF%BC%8C%E6%98%AF%E8%A2%ABJS%E6%8E%A7%E5%88%B6%E5%BC%B9%E5%87%BA%E7%9A%84%EF%BC%8C%3Ca%20href%3D%22http%3A%2F%2Fwww.glzy8.com%22%3Ewww.glzy8.com%3C%2Fa%3E%E8%84%9A%E6%9C%AC%E4%B9%8B%E5%AE%B6%EF%BC%81%3C%2Fp%3E'%2B%20%0D%0A'%3Cp%3E%3Cbutton%20onclick%3D%22window.neatDialog.close()%22%3E%E5%85%B3%E9%97%AD%3C%2Fbutton%3E%3C%2Fp%3E'%3B%20%0D%0Anew%20NeatDialog(sHTML%2C%20%22%E6%AC%A2%E8%BF%8E%E5%85%89%E4%B8%B4!%22%2C%20false)%3B%20%0D%0A%0D%0A%7D%20%0D%0A%0D%0A%3C%2FSCRIPT%3E"> 
<BODY> 
<H1>浮动层居中的效果</H1> 
<BUTTON onclick=openDialog()>点此演示效果</BUTTON> 
</BODY></HTML>

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

教程首页更多教程