欢迎访问我的个人博客:kevoo.org
昨天研究了下遮盖层,最后用js(Jquery)+css实现了,但不是那种动态的,从页面中间由小至全屏的弹出的效果,而是直接显示出遮盖层。做的时候同时考虑了多浏览器的支持(IE,FF)。很简单,现在把代码贴出来,与大家共同学习:
-------------------------------<<main.html>>------------------------------------------------------
<!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" />
<script src="jquery-1.2.3.pack.js" type="text/javascript" language="javascript"></script>
<script src="zhegai.js" type="text/javascript" language="javascript"></script>
<title>遮盖层效果演示</title>
<style>
#overlay{
background: #303030;
opacity: 0.50;
filter:Alpha(opacity=50);
display: none;
position: absolute;
top: 0px;
left: 0px;
width: 100%;
height: 100%;
z-index: 100;
}
#tishi{
margin-left:auto;
margin-right:auto;
border:2px solid #FFFFFF;
font-size:12px;
font-family: "宋体";
color:#990000;
padding-top:20px;
width:400px;
height:200px;
position:absolute;
z-index:110;
display:none;
background:#e7e7e7;
left:35%;
top:20%;
opacity:0.85;
filter:Alpha(opacity=85);
}
</style>
</head>
<body style="text-align:center;">
<input id="zg" type="button" value="显示遮盖" />
<div id="tishi">
用户名:<input id="usr" type="text" value="" /><br />
密 码:<input id="pas" type="text" value=""/><br /><br />
<input id="ok" type="button" style="width:80px" value="确 定"/>
</div>
<div id="overlay"></div>
</body>
</html>
--------------------------------<<zhegai.js>>---------------------------------------------------------------
$(document).ready(function (){
$("#zg").click(function() {
document.getElementById("overlay").style.display="block";
document.getElementById("tishi").style.display="block";
});
$("#ok").click(function () {
document.getElementById("overlay").style.display="none";
document.getElementById("tishi").style.display="none";
});
});
以上就是全部代码了,在使用的时候别忘了加上jquery的js文件,当然完全可以自己用js实现的。
没有js的,可以从我这里下载。