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

Question

возможно ли отключить прокрутку в браузере (только для полос прокрутки браузера), когда открыто модальное диалоговое окно jQuery UI.

Примечание: я хочу, чтобы прокрутка была включена в диалоге

Answer 1

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

Answer 2

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

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

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

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

Answer 3

Ссылка на корзину JS для переполнения CSS

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

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

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

И

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

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

Answer 4

Вот лучшее, что я мог придумать, чтобы решить эту проблему (у меня была такая же проблема), используя функции, на которые ссылается 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.

Answer 5

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

$('<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 6

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

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

Answer 7

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

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

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

Answer 8

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

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

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

Answer 9

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

Answer 10

Создайте этот класс 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: и close: для вызова других функций, простодобавьте строки addClass и removeClass в соответствующем месте.