Отцентровать popup с помощью css | Wiki | PWODEV
, 25.10.2018 15:46

Отцентровать popup с помощью css


Ранее мы писали о том как привязать футер к низу страницы, сегодня мы рассмотрим как отцентровать popup с помощью css. Мы пересмотрели много различных методов, но ни один из них не удовлетворял нашим нуждам, поэтому было принято решение найти идеальный метод центрирования блока (попапа) по вертикале и горизонтали, средствами css, без использования js. Метод учитывает что высота попапа может быть разной: маленькой, большей, превышающей размер окна. В случае большей высоты попапа, появится скролл (scroll), и popup можно будет прокрутить. Также мы учли, что в этом случае должен быть не большей отступ сверху и снизу.

Этот метод был разработан совместно с Fullstack Developer Vitalii Zelenskyi — http://www.VitaliyZelenskiy.de

Метод как отцентровать popup с помощью css:

HTML код:

CSS код:

Скриншоты:

Отцентровать popup

Уменьшим экран по высоте. Popup останется вверху с отступом и появится скролл (scroll).

Отцентровать popup

Если прокрутить попап вниз, там будет тоже отступ:

Отцентровать popup

Потестировать как работает метод можно по ссылке: http://test.pwodev.com/popup/

Этот метод будет постепенно усовершенствоваться. Но на данный момент, для нас это лучший метод. Если вы хотите предложить другие способы, или вы нашли ошибки в нашем методе, оставляйте комментарии.

 


Добавить комментарий