bootstrap modal удаляет полосу прокрутки


95

Когда я запускаю модальное представление на своей странице, полоса прокрутки исчезает. Это раздражает, потому что фоновая страница начинает двигаться, когда модальное окно перемещается / исчезает. Есть ли лекарство от этого эффекта?


1
Ответ, совместимый с браузером: stackoverflow.com/a/47807685/7186739
Super Model

Ответы:


115

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

Это приводит к исчезновению полосы прокрутки, поскольку css начальной загрузки говорит

.modal-open {
    overflow: hidden;
}

Вы можете переопределить это, указав

.modal-open {
    overflow: scroll;
}

в вашем собственном css.


не могли бы вы быть более конкретными?
El Dude

1
Добавил еще несколько деталей. Теперь лучше?
flup

14
Более уместно использовать overflow-y: scroll, что, как мне кажется, лучше отражает цель вопроса OP. Использование overflow: scroll добавит горизонтальную полосу прокрутки в нижнюю часть экрана.
Скотт

1
perfect, также работает с модальными окнами angular-strap, может просто включать вышеуказанный CSS во <style></style>внутрь, templateUrlчтобы он не влиял на другие модальные окна в приложении.
davidkonrad

2
Используйте переполнение: наследование; вместо. Таким образом, модальное окно не удаляет прокрутку, когда у вас есть прокрутка, и не добавляет прокрутку, когда у вас ее нет
Алиссон Альваренга

32

Я думаю, что наследование лучше прокрутки, потому что, когда вы открываете модальное окно, оно всегда будет открываться с помощью прокрутки, но когда у вас нет прокрутки, вы столкнетесь с той же проблемой. Так что я просто делаю это:

.modal-open {
  overflow: inherit;
}

Это настоящий ответ. прокрутка переполнения все еще влияет на какой-то элемент в моем случае.
Coisox 05

25

я использовал

.modal-open {
  overflow-y: scroll;
}

В этом случае вы избегаете отображения горизонтальной полосы прокрутки


мы могли бы объединить его с ответом @Alisson Alvarenga и использовать overflow-y: inherit;
Дмитрий Курманов

23

Лучше использовать overflow-y: прокручивать и удалять отступы из тела, модальное окно начальной загрузки добавляет отступы в тело страницы.

.modal-open {
  overflow:hidden;
  overflow-y:scroll;
  padding-right:0 !important;
}

Совместимость с браузером IE: браузер IE делает то же самое по умолчанию.


1
Спасибо. Кроме того, если модальное всплывающее окно необходимо прокручивать, а родительский элемент должен оставаться на месте .modal-body {max-height: calc (100vh - 210px); переполнение-у: авто; } .modal-open {переполнение: скрытый; переполнение-y: прокрутка; отступ справа: 0! важно; }
Oracular Man

9

Слава богу, я наткнулся на этот пост! Я выдергивал волосы, пытаясь понять, как вернуть свои полосы прокрутки при закрытии окна с помощью моей собственной ссылки закрытия. Я пробовал предлагать CSS, но он просто не работал должным образом. После чтения

Класс modal-open добавляется в тело HTML, когда вы показываете модальное окно, и удаляется, когда вы его скрываете. - @flup

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

<script>
            jQuery(document).ready(function () {
jQuery('.closeit').click(function () {
 jQuery('body').removeClass('modal-open');
                });
            });
        </script>

У меня была проблема, когда я переопределял событие hide.bs.modal, чтобы я мог выполнить некоторый пользовательский код, когда модальное окно было скрыто, но я не осознавал, что это остановило удаление класса modal-open из тела - следовательно, моя полоса прокрутки не вернулась при закрытии этого конкретного модального окна. Я не удаляю класс modal-open вручную в моем коде hide.bs.modal, и он устраняет эту проблему.
Джим

1
Вам просто нужно добавить data-dismiss="modal"атрибут к вашей ссылке, вместо того, чтобы делать что-либо подобное. Bootstrap выполнит все соответствующие действия закрытия при нажатии этой ссылки.
nollidge

1
data-dismiss = "modal" не работает в моем случае, потому что я вызываю функцию в контроллере angular. Предлагаемое решение jQuery очень хорошо работает для меня.
gianni

5

Я просто играл с этой «особенностью» модальных окон Bootstrap. Кажется, у .modalкласса есть. overflow-y:auto;Итак, модальная оболочка получает свою собственную полосу прокрутки, когда сама модальная форма становится слишком высокой.

Если вам всегда нужна полоса прокрутки (дизайнеры часто это делают), сначала установите тело

body {
    overflow-y:scroll;
}

Затем обработайте .modal-open

.modal-open .modal {
    overflow-y:scroll; /* Force a navbar on .modal */
}

.modal-open .topnavbar-wrapper {
    padding-right:17px; /* Noticed that right aligned navbar content got overlapped by the .modal scrollbar */
}

В этом случае оставьте отключение полосы прокрутки на теле нетронутым

Все остальные ответы на этой странице заставляли мой контент прыгать.

Берегись!

Несмотря на то, что это решение работало у меня все время, вчера у меня возникла проблема с использованием этого исправления, когда модальное окно перетаскивается и слишком велико, чтобы соответствовать экрану (по вертикали). Возможно, это связано с position:stickyдобавленными мной элементами?


Когда я добавил body {overflow-y: scroll;}, моя проблема была решена. Спасибо, сэр.
FrenkyB

1

Лучше, если вы создадите свой собственный файл css для настройки определенной части вашего bootrap.

Не изменяйте css-файл начальной загрузки, потому что он изменит все в вашем начальном файле, как только вы будете использовать его в других частях страницы.

Если ваша страница несколько длинная, на ней автоматически появится полоса прокрутки. И когда модальное окно открывается, оно скроет полосу прокрутки, потому что это то, что бутстрап делает по умолчанию.

Чтобы не скрывать его при открытии модального окна, просто переопределите его, поместив код css (ниже) в свой собственный файл css.

.modal-open {
    overflow: scroll;
}

просто наоборот ...

.modal-open {
    overflow: hidden;
}

3
Кажется, он содержит ту же информацию, что и другой ответ на этот вопрос. Если ваш ответ отличается, отредактируйте его, чтобы уточнить, что именно отличается. Пожалуйста, добавляйте новый ответ, только если у вас есть что-то новое.
Джеффри Босбум, 04

1
Он содержит тот же ответ, но есть другой способ его объяснения. Иногда понимание зависит от того, как это объясняется.
NormanCabilatazan

1
Не все читатели могли прийти к единому мнению. Лучше дать им другой способ объяснения, чтобы они ясно поняли.
NormanCabilatazan

1

Кроме того, если модальное всплывающее окно должно прокручиваться с содержимым внутри, а родительский элемент должен оставаться на месте, добавьте следующее в свой Custom.css (переопределив css)

.modal-body {
    max-height: calc(100vh - 210px);
    overflow-y: auto;
}
.modal-open {
    overflow: hidden;
    overflow-y: scroll;
    padding-right: 0 !important;
}

0

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

.modal-open {
    padding: 0 !important;
}

0

Вероятно, это вызвано тем, что 1-й модальный (при закрытии) удаляет модально-открытый класс из элемента тела, а второй не добавляет его обратно при запуске модального-открытого.

В этом случае я бы использовал событие, чтобы проверить, полностью ли закрыт / скрыт модальный, и открыть другой

let modal1 = $('.modal1);
let modal2 = $('.modal2);
$modal1.on('hidden.bs.modal', function (e) {
   $modal2.modal('show');
});

Это будет ждать до закрытия 1-го модального окна, чтобы убедиться, что модальное окно удалено из тела и повторно добавлено при открытии.


0

У меня сама была эта проблема, и ответ на этот вопрос быстро помог мне понять, что вызывает такое поведение. Так что спасибо.

Однако я считаю эти обходные пути CSS немного неэлегантными. Если, конечно, вы специально не хотите сохранить полосы прокрутки (хотя я не могу придумать причину для этого).

По сути, Bootstrap применяет padding-right к определенным элементам для компенсации удаления полосы прокрутки.

Следовательно, все, что вам нужно сделать, - это поместить дополнительную оболочку с нулевым отступом вокруг проблемного элемента (и переместить целевой класс к нему).

т.е. изменение от этого ...

<div class="fixed-top p-1 bg-dark">
    ...this content will move as padding will be modified...
</div>

... к этому...

<div class="fixed-top p-0 bg-dark">
    <div class="p-1">
        ...this content won't move...
    </div>
</div>

0

Единственный ответ, который сработал для меня, следующий:

.modal-open {
  padding-right: 0 !important;
}
html {
  overflow-y: scroll !important;
}
Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.