Tell me more ×
Stack Overflow is a question and answer site for professional and enthusiast programmers. It's 100% free, no registration required.
up vote 7 down vote favorite
3

I'm using a jQuery UI dialog to show a popup containing a page. When I scroll inside the popup and if the scroll bars comes to the bottom, the parent page starts scrolling. How can I restrict the parent page from scrolling while scrolling inside the dialog?

I've created a modal dialog using the following code.

// Dialog
$('#dialog').dialog({
    autoOpen: false,
    width: 800,
    height: 550,
    minHeight: 500,
    maxHeight: 800,
    minWidth: 500,
    maxWidth: 900,
    modal: true,
    buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        }
    }
});

$('#AddNewItems').click(function () {
    var currentURL = getURLOfCurrentPage();
    $('#dialog').dialog('open');
    $("#dialog").dialog("option", "width", 800);
    $("#dialog").dialog("option", "height", 550);
    $("#dialog").dialog( "option", "draggable", false );
    $("#dialog").dialog( "option", "modal", true );
    $("#dialog").dialog( "option", "resizable", false );
    $('#dialog').dialog("option", "title", 'My Title');
    $("#modalIframeId").attr("src", "http://myUrl");
    return false;
});
share|improve this question

3 Answers

up vote 2 down vote accepted

Something like this might work (this is untested):

<script type="text/javascript" language="Javascript">
    var stop_scroll = false;
    function scrolltop(){
        if(stop_scroll == true){
            scroll(0,0);
            // Or window.scrollTo(0,0);
        }
    }
</script>

In your body tag (<body></body>)

<body onscroll="scrolltop();" >

Last, set stop_scroll to true when you open the dialogue and false when you close it.

share|improve this answer
Thanks. Let me give it a try. – NLV Aug 3 '10 at 17:59
Thank you. It is working great. But Scroll(0,0) is giving a jumpy and flickering behavior. Can't i call something like preventDefault() and cancel the event? – NLV Aug 4 '10 at 7:09
I don't think you can (someone can correct me if I'm wrong). I believe the event is only called when the scroll has started, not before it happens. That is why we are moving the scroll position back to (0,0). It already moved before we entered our event. Glad you found it useful though. – Brandon Boone Aug 4 '10 at 12:58
up vote 9 down vote

This is what I use:

$('#dialog').dialog({
    autoOpen: false,
    width: 800,
    height: 550,
    minHeight: 500,
    maxHeight: 800,
    minWidth: 500,
    maxWidth: 900,
    modal: true,
    buttons: {
        "Cancel": function () {
            $(this).dialog("close");
        }
    },
    open: function(){
        $("body").css("overflow", "hidden");
    },
    close: function(){
        $("body").css("overflow", "auto");
    }
});
share|improve this answer
3  
Yep. This works. This is exactly what i did. – NLV Sep 17 '10 at 7:08
What a great idea. Never thought to hide the overflow of the body like that. Well done! – Brandon Boone Jun 3 '11 at 11:40
up vote 0 down vote

gurun8's solution worked best for me. However, I needed a way to do this globally. My application is using dialogs on multiple pages, and I didn't want update all instances.

The following code will handle the opening and closing of all dialogs:

$('body').on('dialogopen', '.ui-dialog-content', function () {
    var $dialog = $(this);
    var $body = $('body');
    var height = $body.height();

    // Hide the main scrollbar while the dialog is visible. This will prevent the main window
    // from scrolling if the user reaches the end of the dialog's scrollbar.
    $body.css('overflow', 'hidden');

    // Calling resize on the dialog so that the overlay is resized for the scrollbars that are now hidden.
    $dialog.resize().on('dialogclose', function () {
        // Show the main scrollbars and unbind the close event handler, as if the
        // dialog is shown again, we don't want the handler to fire multiple times.
        $body.css('overflow', 'auto');
        $dialog.off('dialogclose');
    });
});

I am using jQuery v1.8.23. I tested this in Internet Explorer 8, Internet Explorer 9, Firefox 17 and Chrome 19.

share|improve this answer

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.