jquery遮罩层(带关闭)

公羊涛
2023-12-01

以下代码经过测试,效果非常好,这个地方是控制透明度的:

filter:alpha(opacity=90);
-moz-opacity: 0.90;
opacity: 0.90;

 

建议大家把下面这两个文件下载下来:

<script src="http://www.liehuo.net/uploads/Common/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://www.liehuo.net/uploads/Common/litebox.jquery-min.js" type="text/javascript"></script>

 

具体代码如下:

 

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>demo</title>
<style>
body {
width:100%;
height:100%;
}
*{
margin:0;
padding:0;
}
#lite-overlay {

bottom:auto;
top:expression(eval(document.documentElement.scrollTop));
background-image:url(about:blank);background-attachment:fixed;
position:absolute;
width:100%;
height:100%;
top:0;
left:0;
background-color:#000;
filter:alpha(opacity=90);
-moz-opacity: 0.90;
opacity: 0.90;
}
*html #lite-overlay {
position:absolute;
}
.liteTitle {
height:30px;
line-height:30px;
text-indent:12px;
font-size:12px;
font-weight:bold;
background:#F5F8FA;
position:relative;
}
.liteClose {
height:30px;
line-height:30px;
cursor:pointer;
position:absolute;
right:15px;
top:0;
font-size:12px;
}
#lite-content {
background:#fff;
position:absolute;
top:50%;
left:50%;
z-index:100;
display:none;
}
*html #lite-content {
position:absolute;
}
/*-- loading --*/
#liteloading {
position:absolute;
width:208px;
height:13px;
left:50%;
top:50%;
margin-left:-104px;
margin-top:-6px;
z-index:10000;
background: url(http://www.liehuo.net/uploads/Common/images/loadingAnimation.gif) no-repeat;
}
</style>
<script src="http://www.liehuo.net/uploads/Common/jquery-1.3.2.min.js" type="text/javascript"></script>
<script src="http://www.liehuo.net/uploads/Common/litebox.jquery-min.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li><a href="http://www.liehuo.net?height=500&width=800&scroll=no" title="烈火网" class="liteBox" >烈火网</a></li>
<li><a href="http://blueidea.com?height=300&width=400&scroll=yes" title="蓝色理想" class="liteBox"  >蓝色理想</a>  </li>
<li><a href="http://www.liehuo.net/uploads/Common/html/tanchu.html?height=300&width=500"  class="liteBox"  title="我是弹出框">我是弹出框</a> </li>
</ul>
</body>
</html>

 类似资料: