需要的图片:
![](http://blogimg.chinaunix.net/blog/upfile2/090829172537.jpg)
![](http://blogimg.chinaunix.net/blog/upfile2/090829172441.jpg)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" ""> <html xmlns=""> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <title>无标题文档</title> <script src="js/jquery-1.3.2.js"></script> <script> $(document).ready(function(){ var station = false; //隐藏层的状态 $("#show").click(function(){ if(station==false){ $(".backgroundDiv").css({"opacity":"0.5"}).fadeIn('normal'); var scrollWidth = document.documentElement.clientWidth; var scrollHeight = document.documentElement.clientHeight; var divWidth = $(".info").width(); var divHeight = $(".info").height(); var divLeft = scrollWidth/2-divWidth/2; var divTop = scrollHeight/2-divHeight/2; $(".info").css({"position":"absolute","top":divTop,"left":divLeft}).fadeIn('normal'); station=true; }else{ alert("状态错误!") } }); $("#close").click(function(){ if(station==true){ $(".info").fadeOut('normal'); $(".backgroundDiv").fadeOut('normal'); station =false; } }); }); </script>
<style> .backgroundDiv{ width:100%; height:100%; display:none; z-index:10; background-color:#333333; position:absolute; top:0px; left:0px;} .info{ width:400px; height:300px; background-color:#FFFFFF; border:5px solid #0066FF; display:none; position:absolute; left:0px; top:0px; z-index:11} #closeDiv{ float:right; width:22px; height:22px; margin-top:10px; margin-right:10px;} .close{ float:right} </style> </head>
<body> <center> <img src="images/opacity.jpg" /> <div> <button id="show">press me</button> </div> </center> <div class="backgroundDiv"> sss</div> <div class="info"> <div id="closeDiv">
<img id="close" src="images/close.jpg" width="22" />
</div> <img src="images/opacity.jpg" width="400px"/> </div> </body> </html>
|
完整实例:
![](http://control.cublog.cn/fileicon/rar.gif) |
文件: | 半透明背景层.rar | 大小: | 158KB | 下载: | 下载 | |
阅读(115) | 评论(0) | 转发(0) |