Предотвратить прокрутку тела при открытии модального - PullRequest
Новая
       44

Предотвратить прокрутку тела при открытии модального

310 голосов
/ 02 марта 2012

Я хочу, чтобы мое тело перестало прокручиваться при использовании колесика мыши, пока модальное (с http://twitter.github.com/bootstrap) на моем сайте открыто.

Я пытался вызвать фрагмент JavaScript ниже, когда модал открыт, но безуспешно 

$(window).scroll(function() { return false; });

AND

$(window).live('scroll', function() { return false; });

Обратите внимание, что на нашем сайте прекращена поддержка IE6, хотя IE7 + должен быть совместимым.

Ответы [ 41 ]

1 голос
/ 26 февраля 2014

Мое решение для Bootstrap 3: 

.modal {
  overflow-y: hidden;
}
body.modal-open {
  margin-right: 0;
}

, потому что для меня единственный overflow: hidden в классе body.modal-open не препятствовал смещению страницы влево из-за оригинального margin-right: 15px.

1 голос
/ 18 октября 2013

Большинство частей здесь, но я не вижу ответа, который бы все это соединил.

Проблема тройная.

(1) предотвратить прокрутку базовой страницы 

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

(2) и удалите полосу прокрутки 

var handler = function (e) { e.preventDefault() }
$('.modal').bind('mousewheel touchmove', handler)

(3) очистить, когда модал уволен 

$('.modal').unbind('mousewheel touchmove', handler)
$('body').css('overflow', '')

Если модальный режим не полноэкранный, примените привязки .modal к полноэкранному наложению.

1 голос
/ 03 июля 2015

Я не уверен на 100%, что это будет работать с Bootstrap, но стоит попробовать - он работал с Remodal.js, который можно найти на github: http://vodkabears.github.io/remodal/, и было бы разумно, чтобы методы были красивымианалогично.

Чтобы остановить переход страницы наверх, а также предотвратить смещение содержимого вправо, добавьте класс к body при запуске модального режима и установите следующие правила CSS: 

body.with-modal {
    position: static;
    height: auto;
    overflow-y: hidden;
}

Это position:static и height:auto, которые объединяются, чтобы остановить скачок контента вправо.overflow-y:hidden; останавливает прокрутку страницы за модалом.

1 голос
/ 11 апреля 2017

работал для меня 

$('#myModal').on({'mousewheel': function(e) 
    {
    if (e.target.id == 'el') return;
    e.preventDefault();
    e.stopPropagation();
   }
});
1 голос
/ 08 февраля 2016

Если модальное значение 100% высоты / ширины, «mouseenter /ставка» будет работать, чтобы легко включить / отключить прокрутку.Это действительно сработало для меня: 

var currentScroll=0;
function lockscroll(){
    $(window).scrollTop(currentScroll);
} 
$("#myModal").mouseenter(function(){
    currentScroll=$(window).scrollTop();
    $(window).bind('scroll',lockscroll); 
}).mouseleave(function(){
    currentScroll=$(window).scrollTop();
    $(window).unbind('scroll',lockscroll); 
});
0 голосов
/ 20 июня 2015

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

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

до 

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

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

0 голосов
/ 25 августа 2013

HTML: 

<body onscroll="stop_scroll()">

JavaScript: 

function stop_scroll(){
    scroll(0,0) ;
}

Если вы установите флаг (bool) внутри stop_scroll(), вы можете решить, когда его задействовать (если хотите, только временно).

Это будет сбрасывать прокрутку всякий раз, когда какой-либо элемент переполняет границы body и окна имеют тенденцию к прокрутке (это полностью не зависит от полос прокрутки; overflow : hidden не имеет к этому никакого отношения).

0 голосов
/ 26 августа 2017

Это происходит, когда вы используете модал внутри другого модала. Когда я открываю модал внутри другого модала, закрытие последнего удаляет класс modal-open из body. Решение проблемы зависит от того, как вы закроете последний модал.

Если закрыть модал с помощью html, как, 

<button type="button" class="btn" data-dismiss="modal">Close</button>

Затем вы должны добавить такого слушателя, 

$(modalSelector).on("hidden.bs.modal", function (event) {
    event.stopPropagation();
    $("body").addClass("modal-open");
    return false;
});

Если вы закрываете модал, используя javascript, как, 

$(modalSelector).modal("hide");

Затем вы должны выполнить команду через некоторое время, как это, 

setInterval(function(){$("body").addClass("modal-open");}, 300);
0 голосов
/ 05 июня 2014

Для тех, кто интересуется, как получить событие прокрутки для модала начальной загрузки 3: 

$(".modal").scroll(function() {
    console.log("scrolling!);
});
0 голосов
/ 26 сентября 2014

Это лучшее решение для меня:

Css: 

.modal {
     overflow-y: auto !important;
}

И Js: 

modalShown = function () {
    $('body').css('overflow', 'hidden');
},

modalHidden = function () {
    $('body').css('overflow', 'auto');
}
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...