disable browser scrolling while jQuery UI modal dialog is open
I needed to do exactly the same thing, do it simply by adding a class to the body:
.stop-scrolling {
height: 100%;
overflow: hidden;
}
Add the class then remove when you want to re-enable scrolling, tested in IE, FF, Safari and Chrome.
$('body').addClass('stop-scrolling')
$(formObject).dialog({
create: function(event, ui) {
$("body").css({ overflow: 'hidden' })
},
beforeClose: function(event, ui) {
$("body").css({ overflow: 'inherit' })
}
});
Or as I allude to in the comment below:
var dialogActiveClassName="dialog-active";
var dialogContainerSelector="body";
$(formObject).dialog({
create: function(event, ui) {
$(dialogContainerSelector).addClass(dialogActiveClassName);
},
beforeClose: function(event, ui) {
$(dialogContainerSelector).removeClass(dialogActiveClassName);
}
});
But actually to be honest, you should ensure that creating a dialog bubbles an event up to your window object where you'd be watching for said events, roughly something like this pseudo:
var dialogActiveClassName="dialog-active";
var dialogContainerSelector="body";
$(window).on("event:dialog-opened", function(){
$(dialogContainerSelector).addClass(dialogActiveClassName);
});
$(window).on("event:dialog-closed", function(){
$(dialogContainerSelector).removeClass(dialogActiveClassName);
});