Выравнивание модального окна по центру

[lolmaus]

Как насчет блокировки вертикального скролла основной страницы?

[damat]

Возможно, я вас неправильно понял, но это обычно в обработчике, который окно открывает и закрывает, делается. Или все же нет?

[lolmaus]

Этот обработчик будет всего лишь ставить/снимать HTML-класс на, скажем, ``.

Всё остальное должно быть реализовано на CSS, являющемся частью вашего компонента «модалка» (бр-р-р, ну и словечко).

[ArthurSupertramp]

Обычно в таких случаях на body вешают класс типа body__no-scroll и дают ему overflow: hidden.

[drakmail]

Здорово, классный способ! А как у него с поддержкой браузерами?

[ArthurSupertramp]

PaulZi ответил. Если дополнить хаками для древних IE, то до 6-й версии можно обеспечить совместимость.

[Demetros]

Чем не подошел flexbox?

[ArthurSupertramp]

Да, через час после публикации нашел статью habrahabr.ru/post/238449/

[SerDIDG]

Как раз дополнил статью вариантом с использованием flexbox.

[ArthurSupertramp]

По поводу отступа — я решаю проблему, минифицируя шаблон, забыл упомянуть об этом в статье

[PaulZi]

Этот способ очень бородатый и работает даже с ie6 с хаками display:inline; zoom: 1; (может и раньше).

[Vend3tta]

Вам привет из 2012-го. Советую внимательнее пользоваться поиском.

[ninJo]

Где-то на хабре видел, до сих пор пользуюсь.

.modal{
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  margin: auto;
}

Дешево и сердито.

[XanderBass]

А у модального окна в любом случае должен быть размер.

Изначально модальные окна используются в диалогах и сообщениях. Растягивающиеся модальные окна, IMHO, делать не имеет смысла. Если окно должно уметь менять размер, возникает два вопроса:

— Позиционирование. Вряд ли будет удобно работать с модальным окном, прибитым к краю экрана
— Необходимость использования JavaScript или CSS3 для реализации ресайза. И если первое будет работать с IE, то второе не будет работать точно (до «десятки»).

А теперь просто задайте вопрос: зачем громоздить горы кода чисто для окошка с сообщением или простой формочки? Так что согласен с предыдущим комментатором. Кстати, я в своей практике использовал отрицательный margin. А тут всё ещё проще.

[SerDIDG]

В формочке добавиться одно новое поле — лезть в код и изменять высоту.
В формочке в зависимости о выбранного элемента появляется ещё одно поле — кроме отображения поля ещё и окну менять высоту.
В модальном окне изменился текст сообщения — лезть в код и изменять высоту.
Формочка не влазит на экран по высоте экрана в модальном окне — высчитывать высоту контента окна и добавлять скроллбар так как расширения монитора у всех разное.
Поступило задание адаптировать сайт для сматфонов / таблеток — лезть в код и переделывать все окна.

Выходит вместо того, чтобы сделать на 25% больше цсс сделав универсальное модальное окно под все задачи, вы будете тратить время и исправлять баги.

Решения для демонстрации за 5 минут:
IE10+ jsfiddle.net/serdidg/zyzvsk9d/9/
IE9 + jsfiddle.net/serdidg/zyzvsk9d/10/

[mrTyler]

Есть еще один отличный способ, при условии, что вы поддерживаете только ie9+

.modal-wrapper
position: fixed
top: 0
left: 0
right: 0
bottom: 0
display: flex
// далее выравниваем любое окно внутри по центру контейнера
justify-content: center
align-items: center

.modal-window
// простой див или display: block
// зачастую даже не нужно писать никакие стили для позиционирования окна

готов порассуждать на эту тему, мы используем в нескольких проектах и довольны результатом.

[ArthurSupertramp]

display: flex — часть стандарта Flexbox. Я опираюсь на данные caniuse, там IE11
caniuse.com/#feat=flexbox

[SerDIDG]

В IE10 работает.

[red_pilot]

Не нравятся проверенные методы? Хотете больше багов? К успеху идёте.
Вот вы использовали translate(50%).
И попали на dropshado.ws/post/12243351506/subpixel-positioning-with-css-transforms-and-type в хроме.
И что дальше делать?

[NikitaKA]

Если бы вы дочитали до конца, то вероятно, вопросов бы не было. По-моему, автор предложил очень таки годное решение.

[Mushtat]

Решение работает до ие8 включительно и действительно является проверенным, сам данным подходом пользовался очень долгое время.
Как вариант — простейшая имплементация модального окна, гибкая альтернатива с библиотекой анимации Гринсок:
jsfiddle.net/y6snnwua/

[SerDIDG]

Это не худшее на что можно попасть. Если в таком центрированном блоке будут некоторые элементы, позицию которых просчитывает js, будут не верные координаты. Например если нужно реализовать внутри drag and drop, или всплывающие тултипы, которые вставляются в DOM вне блока.

[red_pilot]

Для меня это худшее.
Некоторые программисты забывают для чего они делают сайты.
Сайты делаются для пользователей. Не для того, чтобы кодить, или было удобно кодить, или чтобы использовать новые фичи, или чтобы он быстро работал, это всё второстепенно.

Неважно какой попап, тултипы, дизайн, вёрстка, node.js с ангулароми и другими свистелками и перделками, если при это у юзера расблюрен текст.

Это из наболевшего.

[ArthurSupertramp]

То есть вы за дедовские методы или что?
Я юзал трансформации для позиционирования до тех пор, пока не увидел, что они блюрят содержимое блока. Мне кажется, что в статье об это написано максимально прозрачно.

Некоторые программисты забывают для чего они делают сайты.

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