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

Ответ 1

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

Это приводит к тому, что полоса прокрутки исчезает, так как bootstrap css говорит

.modal-open {
    overflow: hidden;
}

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

.modal-open {
    overflow: scroll;
}

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

Ответ 2

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

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

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

Ответ 3

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

.modal-open {
  overflow: inherit;
}

Ответ 4

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

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

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

Ответ 5

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

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

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

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

Ответ 6

Я просто играл с этой "функцией" модальных моделей 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 */
}

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

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

Heads up!

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

Ответ 7

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

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

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

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

.modal-open {
    overflow: scroll;
}

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

.modal-open {
    overflow: hidden;
}

Ответ 8

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

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

Ответ 9

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

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