Отключить прокрутку браузера, в то время как модальный диалог jQuery UI открыт

Ответ 1

Вы не можете полностью отключить прокрутку, но вы можете остановить прокрутку с помощью колеса мыши и кнопок, которые обычно выполняют прокрутку.

Посмотрите этот ответ, чтобы понять, как это делается. Вы можете вызвать эти функции на создать событие и вернуть все в норму, close.

Ответ 2

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

Или, как я упоминаю в комментарии ниже:

var dialogActiveClassName="dialog-active";
var dialogContainerSelector="body";

$(formObject).dialog({
 create: function(event, ui) {
   $(dialogContainerSelector).addClass(dialogActiveClassName);
 },
 beforeClose: function(event, ui) {
   $(dialogContainerSelector).removeClass(dialogActiveClassName);
 }
});

Но на самом деле, честно говоря, вы должны убедиться, что создание диалога создает пузырьки события до вашего оконного объекта, где вы будете наблюдать за указанными событиями, примерно так же, как это псевдо:

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

Ответ 3

Мне нужно было сделать то же самое, просто сделайте это, добавив класс в тело:

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

Добавьте класс, затем удалите, когда вы хотите снова включить прокрутку, протестированную в IE, FF, Safari и Chrome.

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

Ответ 4

Справочник JS Bin для переполнения CSS

Просто добавьте

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

к вашей функции, которая показывает модальный.

И

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

к вашей функции, что закрывает модальный.

Ответ 5

Вот лучшее, что я мог придумать для решения этой проблемы (у меня была та же проблема), используя функции, указанные в ответе JasCav выше (эти функции):

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

и он просто фиксирует диалог на странице, что, возможно, нам больше не нужно.

Это позволяет прокручивать мышью, когда мышь находится над диалогом, но не тогда, когда она находится вне диалогового окна. К сожалению, он по-прежнему будет прокручивать главную страницу, когда мышь находится над диалогом, и вы прокручиваете конец содержимого внутри диалогового окна (в IE сразу, в Safari и Firefox после небольшой задержки). Я хотел бы знать, как это исправить.

Я тестировал это в Safari 5.1.5, Firefox 12 и IE 9.

Ответ 6

Останавливает прокрутку, настраивает положение диалога и возвращает пользователя к части страницы, которую они просматривали, после закрытия диалогового окна

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

Ответ 7

Старый пост, но так, как я это делал:

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

Это, кажется, работает довольно хорошо

Ответ 8

Искал долгое время. Наконец, следующая ссылка меня спасает. Надеюсь, что это поможет другим.

Он использует контейнер для основного тела. Диалог прокрутки не влияет на контейнер фона.

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

Ответ 9

попробуйте этот. он используется http://jqueryui.com сам

html { overflow-y: scroll; }

Ответ 10

create: событие Заставляет полосы прокрутки исчезать при первой загрузке страницы Я меняю его на open: и теперь работаю как шарм

Ответ 11

Создайте этот класс css:

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

Затем добавьте это в свой диалог init:

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

Если вы уже используете open: и закрываете: для вызова других функций просто добавьте строки addClass и removeClass в нужное место.

Ответ 12

Лучшее решение, предотвращающее прыжки тела вверх, когда всплывающее окно закрыто:

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

Ответ 13

Эта проблема исправлена, Решение. Просто откройте свой bootstap.css и измените, как показано ниже.

body.modal открыть,
.modal-open.navbar-fixed-top,
.modal-open.navbar-fixed-bottom {
margin-right: 15px;
}

to

body.modal открыть,
.modal-open.navbar-fixed-top,
.modal-open.navbar-fixed-bottom {
/margin-right: 15px;/
}

Пожалуйста, просмотрите приведенное ниже видео на YouTube менее 3 минут, и ваша проблема будет исправлена ​​... https://www.youtube.com/watch?v=kX7wPNMob_E

Ответ 14

Это потому, что вы должны добавить modal: true в свой код; это предотвратит взаимодействие пользователя с фоном.