Центрирование всплывающего модального окна с адаптивной высотой / прокруткой

#html #css #popup #popupwindow

#HTML #css #всплывающее окно #popupwindow

Вопрос:

Хорошо, итак, я создаю всплывающее окно для нашего сайта. Мне нужно, чтобы оно было центрировано на экране, с установленными значениями максимальной ширины и максимальной высоты, чтобы оно никогда не занимало 100% экрана. Я также хочу, чтобы он отображал полосу прокрутки, когда это применимо для оси y.

Я подозреваю, что моя проблема связана с использованием display: table для модального, что я делаю для того, чтобы модальное соответствовало высоте дочерних элементов внутри него. Я предполагаю, что у него есть конфликт со странной комбинацией max-height, overflow: auto и т. Д., Которые я пытаюсь использовать. Любые предложения приветствуются.

Вот демонстрация с SASS / markup. Если вы измените размер своего браузера, чтобы он был коротким, вы можете увидеть, как он не настраивает его на прокрутку, а вместо этого просто выводит края окна за пределы экрана.

http://codepen.io/heatherthedev/pen/deauy

Ответ №1:

Добавьте это свойство в свой .popup CSS . overflow-y: auto;

Это должно решить проблему прокрутки с помощью этого div. Для изменения размера вы можете вызвать метод $(window).resize(), когда пользователь прокручивает панель или представление.