6

I am new to javascript and CSS. Is there anybody know that how to add scroll bar in this pop up window???

Please help.

<style type="text/css">
    #PopupOverlay {
        display: none;
        position: fixed;
        left: 0px; right: 0px;
        top: 0px; bottom: 0px;
        background-color: #000000;
        opacity:.75;
    }
    #PopupWindow {
        display: none;
        position: absolute;
        width: 600px; height: 400px;
        left: 50%; top: 50%;
        margin: -155px 0 0 -300px;
        border: solid 2px #cccccc;
        background-color: #ffffff;
    }
    #PopupWindow h1 {
        display: block;
        margin: 0;
        padding: 3px 5px;
        background-color: #cccccc;
        text-align: center;
    }

Here is the java script part..........................

<script type="text/javascript">
    function OpenPopup() {
        document.getElementById('PopupOverlay').style.display = 'block';
        document.getElementById('PopupWindow').style.display = 'block';
    }
    function ClosePopup() {
        document.getElementById('PopupOverlay').style.display = 'none';
        document.getElementById('PopupWindow').style.display = 'none';
    }
Super Hornet
  • 2,839
  • 5
  • 27
  • 55
So Kim
  • 87
  • 1
  • 2
  • 8

2 Answers2

8

I agree with Coop, buf if you only want vertical scroll bars it would be the following.

#PopupWindow { overflow-y:scroll }

Edit: Also with that bit of code you have there, may want to set the z-index of the PopupWindow to a larger value than the PopupOverlay.

#PopupOverlay {
    display: none;
    position: fixed;
    left: 0px; right: 0px;
    top: 0px; bottom: 0px;
    background-color: #000000;
    opacity:.75;
    z-index:5;
}
#PopupWindow {
    display: none;
    position: absolute;
    width: 600px; height: 400px;
    left: 50%; top: 50%;
    margin: -155px 0 0 -300px;
    border: solid 2px #cccccc;
    background-color: #ffffff;
    overflow-y:scroll;
    z-index:10;
}
Tom
  • 314
  • 2
  • 14
  • yes it okay now =) but how to change the style of the scrollbar? – So Kim Aug 13 '13 at 16:29
  • Thats covered in this post here: http://stackoverflow.com/questions/1256258/div-scrollbar-any-way-to-style-it – Tom Aug 13 '13 at 16:40
3
#PopupWindow { overflow: scroll; }
CaribouCode
  • 13,998
  • 28
  • 102
  • 174