阻止在主頁上滾動的Facebook模式彈出窗口

Question

請參閱下面的Facebook評論模式框。 我正在嘗試實現類似的效果，即用戶單擊一個按鈕，然后打開一個彈出框/模式框。 此框將允許在新框內滾動（因為它可能是許多文本頁面），但不允許在主頁面上的模態之外滾動。 在模態允許在模態窗口內滾動而不允許在其他窗口內滾動時，我如何實現類似的效果？ 謝謝。

Answer 1

通常，這可以通過執行以下操作來實現：

• 為body和html標簽添加height:100% 。
• 添加overflow: hidden顯示模態時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> 

在我的方法中，我為主體使用CSS類來切換overflow狀態。 當body獲得類（ .modalview ）時，它將在折疊下面隱藏內容，並在顯示實際模態的同時從頁面中刪除滾動條。

jQuery是用來類適用於身體，並顯示#modal通過on點擊功能。

為了演示起見，我在單擊頁面時顯示了#modal ，可以將函數綁定到單擊按鈕，如下所示：

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

為了正確地看到這一點，請加載jsFiddle演示並播放頁面寬度以查看滾動方式是如何變化的。