jQuery simplemodal disable scrolling

Question

I have more than 2000 pixels scrolling content on a page.

If the user clicks a div a scrolling content pops up in a simplemodal window. Now my client wants

Answer 1

Turning the scrollbars on and off will cause the content to shift and the overlay will no longer cover the whole window. Here's how to fix it.

var oldBodyMarginRight = $("body").css("margin-right");
$.modal(iframe, {
    onShow: function () {
        // Turn off scroll bars to prevent the scroll wheel from affecting the main page.  Make sure turning off the scrollbars doesn't shift the position of the content.
        // This solution works Chrome 12, Firefox 4, IE 7/8/9, and Safari 5.
        // It turns off the scroll bars, but doesn't prevent the scrolling, in Opera 11 and Safari 5.
        var body = $("body");
        var html = $("html");
        var oldBodyOuterWidth = body.outerWidth(true);
        var oldScrollTop = html.scrollTop();
        var newBodyOuterWidth;
        $("html").css("overflow-y", "hidden");
        newBodyOuterWidth = $("body").outerWidth(true);
        body.css("margin-right", (newBodyOuterWidth - oldBodyOuterWidth + parseInt(oldBodyMarginRight)) + "px");
        html.scrollTop(oldScrollTop); // necessary for Firefox
        $("#simplemodal-overlay").css("width", newBodyOuterWidth + "px")
    },
    onClose: function () {
        var html = $("html");
        var oldScrollTop = html.scrollTop(); // necessary for Firefox.
        html.css("overflow-y", "").scrollTop(oldScrollTop);
        $("body").css("margin-right", oldBodyMarginRight);
        $.modal.close();
    }
});