制作div弹窗的遮盖层

最新推荐文章于 2021-08-04 08:40:37 发布

weixin_34413357

最新推荐文章于 2021-08-04 08:40:37 发布

阅读量137

点赞数

原文链接：https://my.oschina.net/leonaLily/blog/396743

版权

2019独角兽企业重金招聘Python工程师标准>>>

遮盖层的思想就是单独写一个div用于遮盖整个屏幕，设置z-index的值大一些就好，上面的弹窗就是一个div的显隐，只需要show的时候把这个div的z-index的值比遮盖层的值大一些就可以

可以使用的代码如下：

html：

<!DOCTYPE HTML>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>大前端jQuery弹出层效果 - 站长素材</title>

<link rel="stylesheet" href="css/theme.css" media="all">

<script src="js/jquery.min.js"></script>

<script>

jQuery(document).ready(function($) {

$('.theme-login').click(function(){

$('.theme-popover-mask').fadeIn(100);

$('.theme-popover').slideDown(200);

})

$('.theme-poptit .close').click(function(){

$('.theme-popover-mask').fadeOut(100);

$('.theme-popover').slideUp(200);

})

})

</script>

</head>

<body>

<div class="theme-buy">

<a class="btn btn-primary btn-large theme-login" href="javascript:;">点我查看效果</a>

</div>

<div class="theme-popover">

     <div class="theme-poptit">

          <a href="javascript:;" title="关闭" class="close">×</a>

          <h3>登录 是一种态度</h3>

     </div>

     <div class="theme-popbod dform">

           <form class="theme-signin" name="loginform" action="" method="post">

                <ol>

                     <li><h4>你必须先登录！</h4></li>

                     <li><strong>用户名：</strong><input class="ipt" type="text" name="log" value="sc.chinaz.com" size="20" /></li>

                     <li><strong>密码：</strong><input class="ipt" type="password" name="pwd" value="***" size="20" /></li>

                     <li><input class="btn btn-primary" type="submit" name="submit" value=" 登 录 " /></li>

                </ol>

           </form>

     </div>

</div>

<div class="theme-popover-mask"></div>

<div style="text-align:center;clear:both"><br><br><br><br><br><br><br><br><br>

<p>适用浏览器：IE8、360、FireFox、Chrome、Safari、Opera、傲游、搜狗、世界之窗. </p><br>

<p>来源：<a href="http://www.97zzw.com/" target="_blank">97站长网</a></p>

</div>

</body>

</html>

css：

.theme-popover-mask {

    background: none repeat scroll 0 0 #000;

    display: none;

    height: 100%;

    left: 0;

    opacity: 0.4;

    position: fixed;

    top: 0;

    width: 100%;

    z-index: 9998;

}             //遮盖层css

.theme-popover {

    background-color: #fff;

    border: 2px solid #666;

    border-radius: 5px;

    box-shadow: 0 0 10px #666;

    display: none;

    height: 360px;

    left: 50%;

    margin: -180px 0 0 -330px;

    position: fixed;

    top: 50%;

    width: 660px;

    z-index: 9999;

}              //弹窗css