html弹出层和遮罩层,jquery弹出遮罩层代码(原创)

以下为JS代码，注意先引入jquery库

//弹出隐藏层

function ShowDiv(show_div)

{

$(show_div).css({

"top": (($(window).height()-$(show_div).height())/2) + "px",

"left": (($(window).width()-$(show_div).width())/2)  + "px"}).show("fast");

$('.PopUpLayer_black').height($(document).height()).width($(document).width()).show();

$('.PopUpLayer_black , .PopUpLayer_white .close').click(function(){

$('.PopUpLayer_white').hide("fast");

$('.PopUpLayer_black').hide();});

}

以下为CSS样式

.PopUpLayer_black{display: none;position: absolute;top: 0%;left: 0%;width: 100%;height: 100%;background-color: black;z-index:1001;-moz-opacity: 0.8;opacity:.80;filter: alpha(opacity=80);}

.PopUpLayer_white {display: none;position: absolute; border: 3px solid #00C;background-color: white;z-index:1002;overflow: auto;}

.PopUpLayer_white dl{ background:#06F; color:#FFF; width:100%; height:30px; font-size:14px; float:left;}

.PopUpLayer_white dl dt{ float:left; margin-left:10px; margin-top:5px;}

.PopUpLayer_white dl dd{ float:right; margin-right:10px; margin-top:5px; cursor:pointer;}

以下为html使用

[登录]

登录

X

这个遮罩层弹出代码用着还是挺方便的，我项目中用的也是这个！