CSS將滾動條添加到模式窗口

Question

我使用reveal.js在我的網站加載時顯示一些條款&條件。問題在於文本非常大，並且它強制網站的主滾動條變長。

我需要的是將一個滾動條添加到模式窗口，以便內容可以在窗口內滾動，並且使網站的主滾動條不受影響。

我的代碼如下：

HTML：

<a href="#" class="big-link" data-reveal-id-terms="myModal-terms"></a> 
<div id="myModal-terms" class="reveal-modal-terms xlarge"> Mytext </div> 

的Javascript：

$(document).ready(function() { 

    $('#myModal-terms').reveal({ 
     animation: 'fadeAndPop',     //fade, fadeAndPop, none 
     animationspeed: 300,      //how fast animtions are 
     closeonbackgroundclick: false,    //if you click background will modal close? 
     dismissmodalclass: 'close-reveal-terms' //the class of a button or element that will close an open modal 
    }); 
}); 

CSS：

.reveal-modal-terms { 
     visibility: hidden; 
     top: 30px; 
     left: 50%; 
     margin-left: -300px; 
     width: 485px; 
     background: #FFFFFF url(modal-gloss.png) no-repeat -200px -80px; 
     position: absolute; 
     z-index: 101; 
     padding: 30px 40px 34px; 
     -moz-border-radius: 5px; 
     -webkit-border-radius: 5px; 
     border-radius: 5px; 
     -moz-box-shadow: 0 0 10px rgba(0,0,0,.4); 
     -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4); 
     -box-shadow: 0 0 10px rgba(0,0,0,.4); 
     } 

如果我添加overflow: scroll;的CSS它不行， 它仍然採用主網站的滾動條...

問候，

Answer 1

對於溢出工作，它必須在包裝具有所需的寬度和高度一個div。

你需要的東西是這樣的：

<div id="modal" > 
    <div id="content" > 
    </div> 
</div> 

模式在哪裏有你想要的大小，讓我們說寬度：700像素，高度：600像素，具有溢出：汽車; 根據內容，內容可能會超過600px，那麼模式div將滾動。

你的目的，你需要這樣的：

<div id="myModal-terms" class="reveal-modal-terms xlarge"> 
    <div>Mytext</div> 
</div> 

添加一個固定的高度，以您的myModal - 條款和溢出：滾動或自動。

.reveal-modal-terms { 
    visibility: hidden; 
    top: 30px; 
    left: 50%; 
    margin-left: -300px; 
    width: 485px; 
    height :600px; // what ever you like 
    overflow: auto; 
    background: #FFFFFF url(modal-gloss.png) no-repeat -200px -80px; 
    position: absolute; 
    z-index: 101; 
    padding: 30px 40px 34px; 
    -moz-border-radius: 5px; 
    -webkit-border-radius: 5px; 
    border-radius: 5px; 
    -moz-box-shadow: 0 0 10px rgba(0,0,0,.4); 
    -webkit-box-shadow: 0 0 10px rgba(0,0,0,.4); 
    -box-shadow: 0 0 10px rgba(0,0,0,.4); 
    }