JavaScript点击按钮后弹出透明浮动层的方法
本文实例讲述了JavaScript点击按钮后弹出透明浮动层的方法。分享给大家供大家参考。具体分析如下：
这里实现点击后页面变灰色，并用JS弹出一个居中的浮动层提示窗口，这个窗口是透明的，可以设置透明度，网上已经有很多类似的JavaScript代码，你可以借鉴一下。
<HTML>
<HEAD>
<TITLE>浮动层居中的对话框效果演示</TITLE>
<METAhttp-equiv=Content-Typecontent="text/html;charset=utf-8">
<STYLEtype=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:nonetransparentscrollrepeat0%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:#5551pxsolid;BORDER-TOP:#5551pxsolid;
Z-INDEX:99;MARGIN-LEFT:auto;BORDER-LEFT:#5551pxsolid;
WIDTH:30%;MARGIN-RIGHT:auto;BORDER-BOTTOM:#5551pxsolid;
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:#4441pxsolid;POSITION:relative
}
IMG.nd-cancel{
RIGHT:0.2em;POSITION:absolute;TOP:0.2em
}
DIV.neat-dialogP{
PADDING-RIGHT:0.2em;PADDING-LEFT:0.2em;
PADDING-BOTTOM:0.2em;PADDING-TOP:0.2em;TEXT-ALIGN:center
}
</STYLE>
<SCRIPTtype=text/javascript>
functionNeatDialog(sHTML,sTitle,bCancel)
{
window.neatDialog=null;
this.elt=null;
if(document.createElement&&document.getElementById)
{
vardg=document.createElement("div");
dg.className="neat-dialog";
if(sTitle)
sHTML='<divclass="neat-dialog-title">'+sTitle+
((bCancel)?
'<imgsrc="x.gif"alt="Cancel"class="nd-cancel"/>':'')+
'</div>\n'+sHTML;
dg.innerHTML=sHTML;
vardbg=document.createElement("div");
dbg.id="nd-bdg";
dbg.className="neat-dialog-bg";
vardgc=document.createElement("div");
dgc.className="neat-dialog-cont";
dgc.appendChild(dbg);
dgc.appendChild(dg);
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;
}
functionopenDialog()
{
varsHTML='<p>你现在看到的是一个层窗口，是被JS控制弹出的</p>'+
'<p><buttononclick="window.neatDialog.close()">关闭</button></p>';
newNeatDialog(sHTML,"你知道吗？",false);
}
</SCRIPT>
<BODY>
<H1>浮动层居中的效果</H1>
<BUTTONonclick=openDialog()>点此演示效果</BUTTON>
</BODY>
</HTML>
希望本文所述对大家的javascript程序设计有所帮助。