Запретить прокрутку тела при открытии модального
Я хочу, чтобы мое тело перестало прокручивать при использовании колесика мыши во время модального (от http://twitter.github.com/bootstrap) на моем сайте открывается.
Я попытался вызвать фрагмент javascript ниже, когда модальный открыт, но безуспешно
$(window).scroll(function() { return false; });
AND
$(window).live('scroll', function() { return false; });
обратите внимание, что наш веб-сайт потерял поддержку IE6, IE7+ должен быть совместим.
11 ответов
Bootstrap В. modal
автоматически добавляет класс modal-open
к телу, когда модальный диалог отображается и удаляет его, когда диалог скрыт. Поэтому вы можете добавить в свой CSS следующее:
body.modal-open {
overflow: hidden;
}
вы можете утверждать, что приведенный выше код принадлежит к базе кода CSS Bootstrap, но это простое исправление для добавления его на ваш сайт.
обновление 8 февраля,
Теперь это перестало работать в Twitter Boostrap V. 2.3.0 -- они больше не добавляют the modal-open
классе к телу.
обходным путем было бы добавить класс в тело, когда модальный будет показан, и удалить его, когда модальный будет закрыт:
$("#myModal").on("show", function () {
$("body").addClass("modal-open");
}).on("hidden", function () {
$("body").removeClass("modal-open")
});
обновление 11 марта,
Похоже на modal-open
класс вернется в Bootstrap 3.0, явно с целью предотвращения прокрутки:
добавляет .modal-открыть на теле (так что мы можем взорвать свиток там)
посмотреть этот: https://github.com/twitter/bootstrap/pull/6342 - посмотрите на модальные.
принятый ответ не работает на мобильном телефоне (iOS 7 w/ Safari 7, по крайней мере), и я не хочу, чтобы Moar JavaScript работал на моем сайте, когда CSS будет делать.
этот CSS предотвратит прокрутку фоновой страницы под модальным:
body.modal-open {
overflow: hidden;
position: fixed;
}
тем не менее, он также имеет небольшой побочный эффект прокрутки вверх. position:absolute
разрешает это, но повторно вводит возможность прокрутки на мобильном телефоне.
если вы знаете тега (мой плагин для добавления окна <body>
) вы можете просто добавить переключатель css для position
.
body.modal-open {
// block scroll for mobile;
// causes underlying page to jump to top;
// prevents scrolling on all screens
overflow: hidden;
position: fixed;
}
body.viewport-lg {
// block scroll for desktop;
// will not jump to top;
// will not prevent scroll on mobile
position: absolute;
}
Я также добавляю это, чтобы предотвратить переход базовой страницы влево/вправо при отображении / скрытии модалов.
body {
// STOP MOVING AROUND!
overflow-x: hidden;
overflow-y: scroll !important;
}
просто скрыть переполнение тела и делает тело не прокрутки. Когда вы скроете модальное, верните его в автоматический режим.
вот код:
$('#adminModal').modal().on('shown', function(){
$('body').css('overflow', 'hidden');
}).on('hidden', function(){
$('body').css('overflow', 'auto');
})
вы можете попробовать установить размер тела в размер окна с переполнением: скрыто, когда модальный открыт
предупреждение: опция ниже не относится к Bootstrap v3.0.x, поскольку прокрутка в этих версиях была явно ограничена самим модальным. Если отключить колесо событий вы можете ненароком ограничить некоторым пользователям просматривать содержимое в модальные глаголы, которые имеют высоту большую, чем высота вьюпорта.
Еще Один Вариант: Колесо Событий
на свиток событие не отменяется. Однако можно отменить колесо и колеса событий. Большой нюанс заключается в том, что не все устаревшие браузеры поддерживают их, Mozilla только недавно добавила поддержку последнего в Gecko 17.0. Я не знаю полного распространения, но IE6+ и Chrome поддерживают их.
вот как их использовать:
$('#myModal')
.on('shown', function () {
$('body').on('wheel.modal mousewheel.modal', function () {
return false;
});
})
.on('hidden', function () {
$('body').off('wheel.modal mousewheel.modal');
});
JSFiddle
вам нужно выйти за рамки ответа @charlietfl и учетной записи для полос прокрутки, иначе вы можете увидеть документ reflow.
Открытие модального:
- запись
body
ширина - Set
body
переполнениеhidden
-
явно установите ширину тела на то, что было на шаге 1.
var $body = $(document.body); var oldWidth = $body.innerWidth(); $body.css("overflow", "hidden"); $body.width(oldWidth);
закрытие модального:
- Set
body
переполнениеauto
-
Set
body
ширинаauto
var $body = $(document.body); $body.css("overflow", "auto"); $body.width("auto");
вдохновленный:http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php
/* =============================
* Disable / Enable Page Scroll
* when Bootstrap Modals are
* shown / hidden
* ============================= */
function preventDefault(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
function theMouseWheel(e) {
preventDefault(e);
}
function disable_scroll() {
if (window.addEventListener) {
window.addEventListener('DOMMouseScroll', theMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = theMouseWheel;
}
function enable_scroll() {
if (window.removeEventListener) {
window.removeEventListener('DOMMouseScroll', theMouseWheel, false);
}
window.onmousewheel = document.onmousewheel = null;
}
$(function () {
// disable page scrolling when modal is shown
$(".modal").on('show', function () { disable_scroll(); });
// enable page scrolling when modal is hidden
$(".modal").on('hide', function () { enable_scroll(); });
});
попробуй это:
.modal-open {
overflow: hidden;
position:fixed;
width: 100%;
height: 100%;
}
это сработало для меня. (поддержка ИЕ8)
Я не уверен в этом коде, но стоит попробовать.
в jQuery:
$(document).ready(function() {
$(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
$("#Modal").css("overflow", "hidden");
});
});
Как я уже говорил, я не уверен на 100%, но все равно попробуйте.
не смог заставить его работать в Chrome, просто изменив CSS, потому что я не хотел, чтобы страница прокручивалась обратно наверх. Это сработало отлично:
$("#myModal").on("show.bs.modal", function () {
var top = $("body").scrollTop(); $("body").css('position','fixed').css('overflow','hidden').css('top',-top).css('width','100%').css('height',top+5000);
}).on("hide.bs.modal", function () {
var top = $("body").position().top; $("body").css('position','relative').css('overflow','auto').css('top',0).scrollTop(-top);
});
добавление класса "is-modal-open" или изменение стиля тега body с помощью javascript в порядке, и он будет работать так, как должен. Но проблема, с которой мы столкнемся, когда тело станет переполненным:скрыто, оно прыгнет наверх ( scrollTop станет 0 ). Это станет проблемой юзабилити позже.
в качестве решения этой проблемы вместо изменения переполнения тега тела: скрытое изменение его в теге html
$('#myModal').on('shown.bs.modal', function () {
$('html').css('overflow','hidden');
}).on('hidden.bs.modal', function() {
$('html').css('overflow','auto');
});