侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

制作div弹窗的遮盖层

2023-12-10 星期日 / 0 评论 / 0 点赞 / 40 阅读 / 3312 字

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

遮盖层的思想就是单独写一个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





广告 广告

评论区