Login/Register
jQuery UI dialog - Outer window scrolls while scrolling inside the dialog
Asked Answered
Solved jqueryjquery-uiscrolljquery-ui-dialog
L

3

18

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;
});
Latoshalatouche answered 3/8, 2010 at 8:59 Comment(0)
A
23

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");
    }
});
Ambrosial answered 16/9, 2010 at 16:17 Comment(4)
What a great idea. Never thought to hide the overflow of the body like that. Well done! – Lashio
I was using a similar trick using position fixed/absolute instead of overflow, but this started causing issues in FF,thanks a lot. +1 for that. – Yun
Absolutely doesn't work in major browsers. July, 2015. – Floss
Great solution. I was looking for another issue and I've found this helpful answer by chance. Using scroll in some dialogs was being too boring and this solution resolved the issue. Thanks – Adolphus
L
2

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.

Lashio answered 3/8, 2010 at 15:40 Comment(2)
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? – Latoshalatouche
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. – Lashio
A
2

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.

Avesta answered 10/1, 2013 at 11:25 Comment(1)
I use this with a couple of modifications. First, I grab the body's padding-right and set this to the width of the scrollbar (right after changing overflow to hidden). This prevents the page from shifting in the background, which is disorienting. On dialog close I revert the padding-right. Second, before doing anything I test if the body's overflow is already hidden, and if so I do nothing. This can happen if two dialogs are opened at once. – Polemic

© 2022 - 2024 — McMap. All rights reserved.