Disable browser scrolling while jQuery UI modal dialog is open

Question

you can disable scrolling in the browser (only for scroll browsers) while the jQuery UI dialog box is open.

Note. I want scrolling to be enabled inside the dialog box

Answer 1

You cannot completely disable scrolling, but you can stop scrolling with the mouse wheel and buttons that typically scroll.

See this answer to understand how this is done. You can call these functions to create an event and return everything to normal, close .

Answer 2

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

Or, as I mention 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 have to make sure that creating a dialog creates event bubbles up to your window object, where you will observe the specified events, in much the same way as 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 3

I needed to do the same, just do it by adding a class to the body:

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

Add the class, then delete when you want to enable the scroll again, tested in IE, FF, Safari and Chrome.

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

Answer 4

JS Bin Reference for CSS Overflow

Just add

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

to your function that shows modal .

AND

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

to your function, which closes the modal.

Answer 5

Here is the best I could come up with to solve this problem (I had the same problem) using the functions mentioned in JasCav's answer above ( these functions ):

 dialogClass: 'dialog_fixed', create: function(event, ui) { disable_scroll(); // disable while dialog is visible $('#dialog_form').hover( function() { enable_scroll(); }, // mouse over dialog function() { disable_scroll(); } // mouse not over dialog ); }, beforeClose: function(event, ui) { enable_scroll(); // re-enable when dialog is closed }, 

css:

 .dialog_fixed { position:fixed !important; } 

and it just captures the dialog on the page, which perhaps we no longer need.

This allows you to scroll with the mouse when the mouse is above the dialog, but not when it is outside the dialog. Unfortunately, it will still scroll to the main page when the mouse is over the dialog, and you scroll the end of the contents inside the dialog box (in IE immediately, in Safari and Firefox after a short delay). I would like to know how to fix this.

I tested this in Safari 5.1.5, Firefox 12, and IE 9.

Answer 6

Stops scrolling , adjusts the position of the dialog and returns the user to the part of the page they were viewing after closing the dialog box

 $('<div/>').dialog({ open : function(event, ui) { $('html').attr('data-scrollTop', $(document).scrollTop()).css('overflow', 'hidden'); $(this).dialog('option','position',{ my: 'center', at: 'center', of: window }); }, close : function(event, ui) { var scrollTop = $('html').css('overflow', 'auto').attr('data-scrollTop') || 0; if( scrollTop ) $('html').scrollTop( scrollTop ).attr('data-scrollTop',''); } }); 

Answer 7

Old post, but the way I did it:

 open: function(event, ui) { $('html').css('overflow', 'hidden'); $('.ui-widget-overlay').width($(".ui-widget-overlay").width() + 18); }, close: function(event, ui) { $('html').css('overflow', 'hidden'); } 

This seems to work pretty well

Answer 8

Searched for a long time. Finally, the following link saves me. Hope this helps others.

He uses a container for the main body. The scroll dialog does not affect the background container.

http://coding.abel.nu/2013/02/prevent-page-behind-jquery-ui-dialog-from-scrolling/

Answer 9

try this one. it is used by http://jqueryui.com itself

html { overflow-y: scroll; }

Answer 10

create: event Makes the scrollbars disappear the first time the page loads. I change it to open: and now it works like a charm

Answer 11

Create this css class:

 .stop-scrolling { overflow:hidden; height: 100%; left: 0; -webkit-overflow-scrolling: touch; position: fixed; top: 0; width: 100%; } 

Then add this to your init dialog:

 $("#foo").dialog({ open: function () { $('body').addClass('stop-scrolling'); }, close: function () { $('body').removeClass('stop-scrolling'); }, // other options }); 

If you already use open: and close: to call other functions, simply add the addClass and removeClass lines to the desired location.

Answer 12

The best solution to prevent the body from jumping up when the popup is closed:

 $(document).ready(function(){ var targetNodes = $(".cg-popup"); var MutationObserver = window.MutationObserver || window.WebKitMutationObserver; var myObserver = new MutationObserver (mutationHandler); var obsConfig = { attributes : true, attributeFilter : ['style'] }; // ADD A TARGET NODE TO THE OBESERVER. CAN ONLY ADD ONE NODE AT TIME targetNodes.each ( function () { myObserver.observe (this, obsConfig); } ); function mutationHandler (mutationRecords) { var activate_scroll = true; $(".cg-popup").each(function( index ) { if($(this).css("display") != "none"){ $('html, body').css({'overflow-y': 'hidden', 'height': '100%'}); activate_scroll = false; return; } }); if(activate_scroll){ $('html, body').css({'overflow-y': 'auto', 'height': 'auto'}); } } }); 

Answer 13

This issue is fixed, solution. Just open your bootstap.css and change as shown below.

body.modal open,
.modal-open.navbar-fixed-top,
.modal-open.navbar-fixed-bottom {
margin-right: 15px;
}

to

body.modal open,
.modal-open.navbar-fixed-top,
.modal-open.navbar-fixed-bottom {
/ margin-right: 15px; /
}

Please watch the YouTube video below for less than 3 minutes and your problem will be fixed ... https://www.youtube.com/watch?v=kX7wPNMob_E

Answer 14

This is because you must add modal: true to your code; this will prevent the user from interacting with the background.