Как правильно сверстать модальное окно?

Question

[Михаил Р.]

Приветствую!

Написал тестовое модальное окно, но возникла проблема.

Допустим, произошло какое-то событие (например клик) и появилось модальное окно, параметры этого окна:
1. Запрещено скролить основной контент страницы - сделал.
2. Фон модального окна (черный-прозрачный) на всю видимую область окна браузера - сделал.
3. Модальное окно по центру - сделал.
4. Скролл модального окна, если его высота выходит за пределы окна браузера - сделал.

Вопросы:
5. При увеличение содержимого (или высоты) модального окна, верхняя часть модального окна оказывается за областью видимости, как быть?
6. Как Вы реализовали бы подобную задачу с модальным окном? Буду благодарен за любые замечания!

Спасибо!

Comments

[Сергей delphinpro]

Определенно не стоит ограничиваться одними стилями.

5. При увеличение содержимого (или высоты) модального окна, верхняя часть модального окна оказывается за областью видимости, как быть?

Вроде бы очевидно — если есть условие, нужно его обработать. Т.е. если высота модалки превышает высоту вьюпорта, то центрировать его по вертикали не имеет смысла (и даже вредит иногда, как вы заметили). Просто размещаем модалку в этом случае в top:0 (условно). Реализовать можно навешиванием класса-модификатора, после того, как обсчитаем скриптом размеры.

[Михаил Р.]

Сергей delphinpro, да, я думал про js, но хотелось отделаться малой кровью. Может на чистом css есть вариант реализовать все задачи по модалке?

[Сергей delphinpro]

Mike Ro, "Отделаться малой кровью" — это взять готовое решение =)
А так придется заморочиться хотя бы для минимального функционала.

Answer 1

[inkShio]

Так?

Comments

[Михаил Р.]

Белиссимо! Спасибо!

Answer 2

[Eugene Chefranov]

Есть перевод неплохого мануала по модальным окнам prgssr.ru/development/oformlenie-modalnyh-okon.html и там обсуждается данная проблема