$(formObject).dialog({ create: function(event, ui) { $("body").css({ overflow: 'hidden' }) }, beforeClose: function(event, ui) { $("body").css({ overflow: 'inherit' }) } });

O como digo en el siguiente comentario:

 var dialogActiveClassName="dialog-active"; var dialogContainerSelector="body"; $(formObject).dialog({ create: function(event, ui) { $(dialogContainerSelector).addClass(dialogActiveClassName); }, beforeClose: function(event, ui) { $(dialogContainerSelector).removeClass(dialogActiveClassName); } });

Pero en realidad, para ser honesto, debe asegurarse de que la creación de un cuadro de diálogo genere un evento en su objeto de ventana donde estaría observando dichos eventos, más o menos algo como este 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); });

Necesitaba hacer exactamente lo mismo, simplemente agregando una clase al cuerpo:

 .stop-scrolling { height: 100%; overflow: hidden; }

Agregue la clase y luego elimínela cuando desee volver a habilitar el desplazamiento, probado en IE, FF, Safari y Chrome.

 $('body').addClass('stop-scrolling')

Referencia JS Bin para desbordamiento de CSS

Simplemente agregue

$('body').css('overflow','hidden');

a su función que muestra el modal .

Y

$('body').css('overflow','scroll');

a su función que cierra el modal.