javascript - 防止在主页上滚动的 Facebook 模态弹出窗口

Question

请参阅下面的 Facebook 评论模式框。我正在尝试实现类似的效果，即用户单击一个按钮，然后它会打开一个弹出窗口/模式框。此框将允许在新框内滚动(因为它可能是多页文本)，但不允许在主页上的模式之外滚动。如果模态允许在模态窗口内滚动而不是在其他地方滚动，我如何实现类似的效果？谢谢。

Answer 1

通常这是通过执行以下操作来实现的:

• 将 height:100% 添加到 body 和 html 标签。
• 在显示模态时将 overflow: hidden 添加到 body。

---

基本演示:jsFiddle

$("body").on("click", function(){
	$("body").toggleClass("modalview");
})

html, body {background:#666; color:#FFF; margin: 0; padding: 0; height:100%;}

#content {
  padding:1em;
  width:90%;
  margin:0 auto;
}

#modal {
  /* hidden by default */
  display: none;
  /* box */
  width:75%;
  height:75%;
  padding:1em;
  position: fixed; z-index:1;
  overflow: auto;
  /* center modal vertically and horizontally */
  left: 50%; top: 50%;
  transform: translate(-50%,-50%);
  /* style */
  text-align: center;
  background:#FFF;
  box-shadow:1px 1px 15px #000;
  color:#000;
}

/* prevent page scrollbars in modal view */
body.modalview { overflow:hidden; }

/* show #modal in modal view */
body.modalview #modal { display: block;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="modal">
  <p>All UR SCROLLS ARE BELONG TO US!!!</p>
  <p>Et velit odit cumque hic, aspernatur. Perferendis assumenda est necessitatibus cupiditate cum odit deleniti doloribus earum veniam dolores, neque laudantium laboriosam optio numquam autem iure animi ipsa dolor fugit blanditiis?</p>
  <p>Unde quidem sunt quos itaque minus, quia modi nisi temporibus. Consectetur natus perferendis possimus, rem, sed tempora cumque dolorum quod provident blanditiis eum ipsam voluptate dolor, harum doloremque id amet.</p>
</div>

<div id="content">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi assumenda quas, rem voluptas et, totam officia quos, quaerat doloribus eaque odio aperiam a obcaecati explicabo quod eveniet eum aliquid! Repellat.</p>
  <p>Vitae ipsum explicabo voluptatibus corrupti odio ipsa, tenetur modi veritatis excepturi architecto nam dignissimos ratione. Iusto temporibus ipsum cupiditate excepturi modi eos alias dolores eveniet possimus. Alias, esse error quam!</p>
  <p>Ea numquam quae laborum ut vitae molestias dolorum fugit, asperiores aliquid voluptates vero ab consequuntur ipsum maxime obcaecati temporibus voluptate sed quaerat, necessitatibus deleniti. Quibusdam iste saepe inventore amet eius.</p>
  <p>Aut veritatis quos quaerat, placeat nam est ad tempora delectus magnam molestiae, ipsum cupiditate debitis illum perferendis ut nisi beatae voluptas provident consectetur inventore assumenda eveniet? Molestiae architecto ullam nulla.</p>
  <p>Explicabo, debitis? Mollitia reiciendis sint minus adipisci, consectetur consequatur assumenda blanditiis pariatur ex facilis expedita et earum molestiae quos, laborum sed suscipit doloribus placeat ipsam in vero quaerat aliquid iure!</p>
  <p>Earum dolorem eveniet laboriosam vel dolor! Ullam nisi adipisci voluptatem, voluptatum tenetur, itaque ducimus laboriosam repudiandae quibusdam numquam dignissimos aperiam praesentium culpa porro sapiente ab eos magni? Maiores, doloremque, aspernatur.</p>
</div>

在我的方法中，我为 body 使用了一个 CSS 类来切换 overflow 状态。当 body 获取类 (.modalview) 时，它将隐藏折叠下方的内容并从页面中删除滚动条，同时显示实际模态。

jQuery 用于将类应用于正文并通过 on 点击函数显示 #modal。

为了演示，我让 #modal 在您单击页面时显示，您可以将该函数绑定(bind)到按钮单击，如下所示:

$("#myButton").on("click", function(){
    $("body").toggleClass("modalview");
})

要正确查看，请加载 jsFiddle demo 并调整页面宽度以查看滚动如何变化。