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);
        }

如果我向CSS添加overflow: scroll;它不起作用，它仍然使用主网站的滚动条...

此致

Answer 1

要使溢出工作，需要将其包装在具有所需宽度和高度的div中。

你需要这样的东西：

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

如果modal具有您想要的大小，请说宽度：700px，高度：600px，溢出：auto; 并且内容可能有超过600px，具体取决于内容，然后模态div将滚动。

出于您的目的，您需要：

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

为myModal-terms添加固定高度并溢出：滚动或自动。

.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);
    }

CSS将滚动条添加到模态窗口

1 个答案: