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

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

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

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

AND

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

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

272
javascript jquery scroll twitter-bootstrap

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 - посмотрите на модальные.

394

принятый ответ не работает на мобильном телефоне (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;
}

этот ответ является X-post.

90

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

вот код:

$('#adminModal').modal().on('shown', function(){
    $('body').css('overflow', 'hidden');
}).on('hidden', function(){
    $('body').css('overflow', 'auto');
})
23

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

19

предупреждение: опция ниже не относится к 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

16

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

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

  1. запись body ширина
  2. Set body переполнение hidden

  3. явно установите ширину тела на то, что было на шаге 1.

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

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

  1. Set body переполнение auto

  2. Set body ширина auto

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

вдохновленный:http://jdsharp.us/jQuery/minute/calculate-scrollbar-width.php

12
/* =============================
 * 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(); });
});
8

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

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

это сработало для меня. (поддержка ИЕ8)

8

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

в jQuery:

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

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

6

не смог заставить его работать в 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

добавление класса "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');
});
4