[jQuery] showing overlay when loading doesn't fullscreen when scroll-down

[ibug~]

css code is :
        #overlay {
                display: none;
                position: absolute;
                z-index:100;
                top: 0px;
                left: 0px;
                background-color:#000000;
                filter: alpha(opacity=75);
                opacity: .75;
                height: 100%;
                width: 100%;
        }
        #modal {
                display: none;
                position: absolute;
                left: 50%;
                top: 50%;
                z-index: 101;
                width: 200px;
               margin: -100px;
              background-color: #fff;
              border:1px solid #222;
              padding: 15px;
              text-align:center;
        }

html code is :
<div id="overlay"></div>
<div id="modal">
        <table><tr>
                <td><img id="loader" 
src="<?=base_url();?>../Images/ajax-loader.gif"/
></td>
                <td>loading...</td>
        </tr></table>
</div>

javascript for show and hide them is :
function loading() {
                $('#overlay, #modal').show();
        }
        function loaded() {
                $('#overlay, #modal').hide();
        }

Everything is ok except when overlay and modal showing (run function
loading())
i have tried scroll-down, the overlay doesn't really fullscreen!!
(fullscreen only doesn't any scrolling)

- disable scrolling ?
- really overlay fullscreen ?
- any idea ?

thanks a lot.