How to add scrollbar to this javascript javascript popup?

Question

I am new to javascript and CSS. Does anyone know how to add a scroll bar to this popup ???

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

Answer 1

I agree with Coop, buf, if you only need vertical scrollbars, this will be the following.

 #PopupWindow { overflow-y:scroll } 

Edit: also with this bit of code that you have, you may need to set the z-index of PopupWindow to a larger value than 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; } 

Answer 2

 #PopupWindow { overflow: scroll; }