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

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

67
javascript modal-dialog twitter-bootstrap

9 ответов

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

это заставляет полосу прокрутки исчезнуть, так как css bootstrap говорит

.modal-open {
    overflow: hidden;
}

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

.modal-open {
    overflow: scroll;
}

на свой css.

87

Я

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

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

23

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

.modal-open {
  overflow: inherit;
}
20

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

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

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

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

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

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

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

4

Я просто играл с этой "особенностью" Модалов 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 элементы, которые я добавил?

3

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

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

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

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

.modal-open {
    overflow: scroll;
}

только наоборот...

.modal-open {
    overflow: hidden;
}
1

bootstrap modal добавляет дополнение после его открытия, чтобы вы могли попробовать этот код в своем css

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

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

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