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;
});
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");
}
});