弹层蒙层阻止出现滚动

এ᭄ꦿ十二ঞ

已于 2023-07-05 09:57:08 修改

阅读量103

点赞数

CC 4.0 BY-SA版权

于 2023-07-05 09:44:58 首次发布

本文链接：https://blog.csdn.net/FANSILVLV/article/details/131548758

这篇文章描述了一个关于网页弹窗的实现方法，当弹窗显示时阻止页面滚动，弹窗关闭后恢复页面滚动。使用jQuery来处理弹窗的显示和关闭事件，并通过修改`document.body`和`document.documentElement`的overflow属性控制滚动条的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

弹窗后页面不滚动

 /* 投票弹窗 */
      .pop,
      .pop1 {
        width: 100vw;
        height: 100vh;
        background-color: rgba(0, 0, 0, 0.5);
        top: 0;
        left: 0;
        position: fixed;
        display: none;
        z-index: 11;
      }

      .pop-box {
        width: 480px;
        height: 328px;
        background: #ffffff;
        border-radius: 8px;
        position: fixed;
        top: 50%;
        left: 50%;
        margin-top: -164px;
        margin-left: -240px;
        box-sizing: border-box;
        position: relative;
        padding: 27px 30px 24px 30px;
      }
 <div class="pop">
     <div class="pop-box">
		//这里面写内容
	</div>
 </div>
<script>
 // 关闭投票弹窗
    $(document).on("click", ".close", function (e) {
      e.stopPropagation();  //防止冒泡
      $(this).parent().parent().parent().css("display", "none");
      //恢复body滚动
      document.body.style.overflow = "";
      //恢复整个网页滚动
      document.documentElement.style.overflow = "";
    });
    // 打开投票弹窗
    $(document).on("click", ".place", function (e) {
      e.stopPropagation(); //防止冒泡
      $(".pop").css("display", "block");
      // 打开蒙层时禁止后面的主题有滚动
      //禁止body滚动
      document.body.style.overflow = "hidden";
      //禁止整个网页滚动
      document.documentElement.style.overflow = "hidden";
    });
</script>