CODEWITHSUNDEEP
cssmodal-dialogscrollbarreveal.js
Egidi
Egidi

Reputation: 1776

CSS add scrollbar to modal window

I am using reveal.js to show some terms&conditions when my website is loaded. The thing is that the text is pretty large and it forces the website's main scrollbar to be longer.

What i need, is to add a scrollbar to the modal window, so that the content can be scrolled inside the window and so that the website's main scrollbar is not affected.

My code is as follows:

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

if i add overflow: scroll; to the CSS it does not work, it still uses the main website's scrollbar...

Regards,

Upvotes: 0

Views: 17664

Answers (1)

Mathieu Labrie Parent
Mathieu Labrie Parent

Reputation: 2596

For overflow to work it need to be wrap in a div that has the desired width and height.

You need something like this :

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

Where modal has the size you want, let's say width :700px, height : 600px, with the overflow:auto; And the content may have more then 600px depending of the content, then the modal div will scroll.

For your purpose you need this : 

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

Add a fixed height to your myModal-terms and overflow:scroll or auto.

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

Upvotes: 2

Related Questions