CODEWITHSUNDEEP
jqueryjquery-ui
Omu
Omu

Reputation: 71198

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 to be enabled inside the dialog

Upvotes: 56

Views: 103585

Answers (16)

SilentJ
SilentJ

Reputation: 31

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.

Upvotes: 3

Flyke
Flyke

Reputation: 367

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

Upvotes: 2

Gricel Dayhanna Seplveda Rozas
Gricel Dayhanna Seplveda Rozas

Reputation: 1

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

Upvotes: 0

Kirk Ross
Kirk Ross

Reputation: 7153

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.

Upvotes: 2

Hopeful Man
Hopeful Man

Reputation: 1

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

Upvotes: -1

Naveen Kumar Alone
Naveen Kumar Alone

Reputation: 7668

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.

Upvotes: 28

horizon1711
horizon1711

Reputation: 152

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/

Upvotes: 2

airtonix
airtonix

Reputation: 5154

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

Upvotes: 78

oLinkWebDevelopment
oLinkWebDevelopment

Reputation: 1961

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

Upvotes: 5

hcharge
hcharge

Reputation: 1246

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

Upvotes: 2

Otto Kanellis
Otto Kanellis

Reputation: 3708

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

Upvotes: 1

Hal
Hal

Reputation: 1

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

Upvotes: -3

Izzati Ali
Izzati Ali

Reputation: 31

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

html { overflow-y: scroll; }

Upvotes: 1

hallodom
hallodom

Reputation: 6549

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

Upvotes: 47

Craig Nakamoto
Craig Nakamoto

Reputation: 2085

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.

Upvotes: 7

JasCav
JasCav

Reputation: 34632

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.

Upvotes: 4

Related Questions