Menu
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;
});
409
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");
}
});
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.
20
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.
1
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
