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

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

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

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

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

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

AND

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

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

Ответы [ 41 ]

444 голосов
/ 13 июня 2012

Bootstrap modal автоматически добавляет класс modal-open в тело, когда отображается модальное диалоговое окно, и удаляет его, когда оно скрыто. Поэтому вы можете добавить следующее в ваш CSS: 

body.modal-open {
    overflow: hidden;
}

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

Обновление 8 февраля 2013 г.
Теперь это перестало работать в Twitter Boostrap v. 2.3.0 - они больше не добавляют класс modal-open в тело.

Обходной путь - добавить класс к телу, когда модал должен быть показан, и удалить его, когда модал закрыт: 

$("#myModal").on("show", function () {
  $("body").addClass("modal-open");
}).on("hidden", function () {
  $("body").removeClass("modal-open")
});

Обновление 11 марта 2013 г. Похоже, класс modal-open вернется в Bootstrap 3.0 явно для предотвращения прокрутки:

Повторно вводит .modal-open на теле (чтобы мы могли убрать свиток там)

См. Это: https://github.com/twitter/bootstrap/pull/6342 - посмотрите на Модальный раздел.

112 голосов
/ 14 июля 2014

Принятый ответ не работает на мобильных устройствах (iOS 7, по крайней мере, 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;
}

этот ответ - кс-пост.

29 голосов
/ 15 ноября 2012

Просто скрыть переполнение тела, и это делает тело не прокручивается.Когда вы скрываете модал, верните его в автоматический режим.

Вот код: 

$('#adminModal').modal().on('shown', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})
21 голосов
/ 02 марта 2012

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

17 голосов
/ 29 ноября 2012

Предупреждение: Опция ниже не относится к Bootstrap v3.0.x, поскольку прокрутка в этих версиях была явно ограничена самим модалом. Если вы отключите события колесика, вы можете непреднамеренно запретить некоторым пользователям просматривать контент в модах, высота которых превышает высоту области просмотра.

Еще один вариант: колесные события

Событие scroll не может быть отменено. Однако можно отменить события колесика мыши и колесо . Большая оговорка в том, что не все устаревшие браузеры поддерживают их, 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

16 голосов
/ 09 мая 2013

Вам нужно выйти за рамки ответа @ charlietfl и учетной записи для полос прокрутки, в противном случае вы можете увидеть перекомпоновку документа.

Открытие модального окна:

  1. Запишите body ширину
  2. Установите body переполнение на hidden

  3. Явно установите ширину тела, равную ширине тела на шаге 1. 

    var $body = $(document.body);
var oldWidth = $body.innerWidth();
$body.css("overflow", "hidden");
$body.width(oldWidth);

Закрытие модального режима:

  1. Установить body Переполнение на auto

  2. Установить body Ширина на auto

    var $body = $(document.body);
$body.css("overflow", "auto");
$body.width("auto");

По мотивам: http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php

9 голосов
/ 15 февраля 2015

Попробуйте это: 

.modal-open {
    overflow: hidden;
    position:fixed;
    width: 100%;
    height: 100%;
}

это сработало для меня. (поддерживает IE8)

9 голосов
/ 23 мая 2013 
/* =============================
 * 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(); });
});
7 голосов
/ 30 октября 2013

Не удалось заставить его работать в 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);
});
6 голосов
/ 02 марта 2012

Я не уверен насчет этого кода, но стоит попробовать.

В jQuery: 

$(document).ready(function() {
    $(/* Put in your "onModalDisplay" here */)./* whatever */(function() {
        $("#Modal").css("overflow", "hidden");
    });
});

Как я уже говорил, я не уверен на 100%, но все равно попробую.

Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

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

...