disable browser scrolling while jQuery UI modal dialog is open

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 t开发者_开发问答o be enabled inside the dialog

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

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

JS Bin reference for CSS overflow

Simply Add

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

to your function that shows the modal.

And

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

to your function that closes the modal.

Here is the best that I could come up with to solve this issue (I had the same problem) using the functions referenced in the answer by JasCav 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
},

the css is:

.dialog_fixed { position:fixed !important; }

and it just keeps the dialog fixed on the page, which maybe we don't need anymore.

This allows mouse scrolling while the mouse is over the dialog, but not when it is outside the dialog. Unfortunately it will still scroll the main page when the mouse is over the dialog and you scroll past the end of the content inside the dialog (in IE right away, in Safari and Firefox after a short delay). I would love to know how to fix this.

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

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

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

You can't disable scrolling completely, but you can stop scrolling with the mouse wheel and the buttons that typically perform scrolling.

Take a look at this answer to understand how that is done. You could call these functions on the create event and return everything to normal, on close.

Just a modification on an answer posted above by hallodom

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

browser scrolling wasn't disabled until I added html.

.stop-scrolling {
  overflow: hidden;
}

by removing height: 100%, the bump-to-top effect was removed.

Tested on Chrome, Firefox and Safari.

Old post but the way I did it was:

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 quite nicely

Searched for a long long time. Finally the follow link saves me. Hope it's helpful to others.

It uses a container for the main body. The scrolling in dialog won't affect the background container.

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

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 dialog init:

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

If you are already using open: and close: to call other functions, just add the addClass and removeClass lines in the appropriate place.

$(settings.dialogContentselector).dialog({
        autoOpen: false,
        modal: true,
        open: function( event, ui ) {
            $("html").css({ overflow: 'hidden' });
            $("body").css({ overflow: 'hidden' });
        },
        beforeClose: function( event, ui ) {
            $("html").css({ overflow: 'auto' });
            $("body").css({ overflow: 'auto' });
        }
    });

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

html { overflow-y: scroll; }

create: event Makes scrollbars disappear when page loading for first time I change it with open: and working now like a charm

A better solution avoiding body jumps to top when 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'});
    }
  }
});

This issue is fixed, Solution: Just open your bootstap.css and change as 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 view the below youtube video only less than 3min your issue will fix... https://www.youtube.com/watch?v=kX7wPNMob_E

It is because you have to add modal: true in your code; this prevent user from interacting with background.