html - disable background using css when popup appear

Question

I am using the below css code to block the entire page when the popup appeared. But it's working(The visible page only covered not all). I have a problem, if my page having a scroll bar means the remaining bottom of the page not covered by the blocker.

.parentDisable
        {
            z-index: 99999;
            width: 100%;
            height: 100%;
            display: none;
            position: absolute;
            top: 0%;
            left: 0%;
            background-color: #000;
            color: #aaa;
            opacity: 0.8;
            filter: alpha(opacity=100);
        }
        #popup
        {
            width: 300;
            height: 300;
            position: relative;
            color: #000;
            top: 25%;
        }

Answer 1

use this css

.parentDisable{
    position: fixed;
    top: 0;
    left: 0;
    background: #000;
    opacity: 0.8;
    z-index: 998;
    height: 100%;
    width: 100%;}

#popup{
    position: absolute;
    z-index: 999;}

and this html

<div class="parentDisable"></div>
<div id="popup">My pop up</div>