防止在主頁面上滾動的Facebook模式彈出式菜單

Question

請參閱下面的Facebook註釋模式框。我試圖達到類似的效果，用戶點擊一個按鈕，然後打開一個彈出框/模式框。此框將允許在新框中滾動（因爲它可以是多頁文本），但不允許在主頁上的模式之外滾動。如何在模態允許在模態窗口內滾動但不在別處時獲得類似的效果？謝謝。

Answer 1

通常總能執行以下操作：

• 添加height:100%到body和html標籤。
• 當模式顯示時將overflow: hidden添加到body。

---

基本演示：jsFiddle

$("body").on("click", function(){ 
 
\t $("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用於將類應用於body，並通過on單擊函數顯示#modal。

出於演示的目的，我做了#modal顯示當您只需點擊網頁上，你可以將功能結合到一個點擊按鈕，像這樣：

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

要正確地看到這一點，加載了jsFiddle demo並播放頁面寬度以查看滾動更改的方式。