js/css : disable scrollbar but keep scroll position

Question

I\'m using the Jquery dialog to open a popup box window on top of a page. When I open the dialog box, I want the general page scrolling to be disabled. To do so, I am doing

Answer 1

Remembering the offset should keep your popup at bay;

JSfiddle

HTML

    Close me



asd 
asd 
asd 
asd 
asd 

Popup

asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd

Popup

asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 

Popup

asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd

Popup

asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 
asd 

CSS

html, body {
    margin: 0px;
}

#popupholder {
    width: 100%;
    height: 100%;
    position: absolute;
    display: box;
    display: -webkit-box;
    display: -moz-box;
    background-color: rgba(0,0,0,0.75);
    display: none;
}

#close {
    display: block;
    height: 20px;
    margin: 75px auto 0px auto;
}

JavaScript

$(document).ready(function() {
    $('.open').click(function() {
        // Block scrolling
        $('body').css('overflow', 'hidden');

        // Show popup
        var offset = window.pageYOffset;
        //console.log(offset);
        $('#popupholder').css({
            'display': 'block',
            'top': offset + 'px'
        });
    });

    $('#close').click(function() {
        // Enable scrolling
        $('body').css('overflow', 'auto');

        // Hide popup
        $('#popupholder').css('display', 'none');
    });
});

For safety-reasons you could add a very high z-index to your #popupholder, but that's not really relevant to the question.