Пример: Модальное окно абсолютно по центру

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

Открыть окно 1 Открыть окно 2 Открыть окно 3 Открыть окно 4

Модальный блок №1 абсолютно по центру.

Окно выводится строго по центру, по горизонтали и по вертикали, внутри контейнера с относительным позиционированием. В данном примере показана возможность использования встроенных миниатюр, разположенных слева в div-контейнере с выделенным классом .pl-left

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

Модальный блок №2 абсолютно по центру.

Окно выводится строго по центру, по горизонтали и по вертикали, внутри контейнера с относительным позиционированием. В данном примере показана возможность использования встроенных миниатюр, разположенных слева в div-контейнере с выделенным классом .pl-right

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

Модальный блок №3 абсолютно по центру.

Окно выводится строго по центру, с встроенным изображением, которое отлично подстраивается под размеры ьодального блока, вне зависимости от фиксированных размеров оригинальной картинки, использовал width: 100%;

Модальный блок №4 абсолютно по центру.

Окно выводится абсолютно по центру, с встроенным адаптивным видеоплеером популярных видеосервисов, предлагающих различные методы вставки видео на сайт iframe, object и embed

сделано с любовью: @dobrovoi

«« Изучить детали