jQuery,CSS实现的遮罩层消息显示_jquery 遮罩层显示内容-优快云博客

本文链接：https://blog.youkuaiyun.com/bianchengxiaosheng/article/details/8937249

<!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=utf-8" />
<title>jQuery,CSS实现的遮罩层消息显示</title>
<script type="text/javascript" src="js/jquery.js"></script>
<style>
.overlay{
/*background:transparent url(images/overlay.png) repeat top left;
position:fixed;
top:0px;
bottom:0px;
left:0px;
right:0px;
z-index:100;*/
   background-color:rgb(0,0,0);
   display:none;
   opacity:0.7;    /* Safari, Opera */
   -moz-opacity:0.70;    /* FireFox */
   filter: alpha(opacity=70); /* IE */
   z-index:100;
   height:100%;
   width:100%;
   background-repeat:repeat;
   position:fixed;
   top:0px;
   left:0px;
}
.box{
   /*display:none;*/
   position:fixed;
   top:-500px;
   left:30%;
   right:30%;
   height:200px;
   background-color:#fff;
   color:#7F7F7F;
   padding:20px;
   border:2px solid #ccc;
   -moz-border-radius: 20px;
   -webkit-border-radius:20px;
   -khtml-border-radius:20px;
   -moz-box-shadow: 0 1px 5px #333;
   -webkit-box-shadow: 0 1px 5px #333;
   z-index:101;
}
a.boxclose{
float:right;
width:26px;
height:26px;
background:transparent url(images/cancel.png) repeat top left;
margin-top:-30px;
margin-right:-30px;
cursor:pointer;
}
</style>

</head>

<body>
<a id="activator" class="demobutton lightblue" href="#">点击查看效果</a>
<div id="overlay" class="overlay" style="display: none;"></div>
<div id="box" class="box" style="top: -500px;">
<a id="boxclose" class="boxclose" ></a>
</div>

<script type="text/javascript">
$(document).ready(function () {
   $(function () {
       $('#activator').click(function () {
           $('#overlay').fadeIn('fast', function () {
               $('#box').animate({ 'top': '150px'}, 500);
           });
       });
       $('#boxclose').click(function () {
           $('#box').animate({ 'top': '-500px' }, 500, function () {
               $('#overlay').fadeOut('fast');
           });
       });
   });
});
</script>
</body>
</html>