disable browser scrolling while jQuery UI modal dialog is open

Question

is it possible to disable scrolling in browser (just for browser's scrollbars) while a jQuery UI modal dialog is open.

Note: I do want scrolling to be enabled inside the dialog

Answer 1

$(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); }); 

Answer 2

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')