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

作者: 小古 分类: 网站技术 发布时间: 2013-6-2 ė15073 次浏览 61 条评论

以下为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使用

<a href="#" onclick="ShowDiv('#Login')" >[登录]</a>

<div class="PopUpLayer_black"></div>
<div id="Login" class="PopUpLayer_white">
    <dl><dt>登录</dt><dd class="close">X</dd></dl>
 这个遮罩层弹出代码用着还是挺方便的,我项目中用的也是这个!
</div>

本文出自 小古Blog,转载时请注明出处及相应链接。

本文永久链接: http://blog.chdz1.com/?post=199

|

1条评论

  1. 端子机 2013-06-21 09:42

    看着好复杂的回复

发表评论:

电子邮件地址不会被公开。 必填项已用*标注

Ɣ回顶部
sitemap