Как отцентровать окно браузера
Как сделать стопроцентно адаптивное модальное окно на чистом CSS, которое к тому же выводилось строго по центру, и одинаково хорошо, без видимой ломки, смотрелось на различных типах экранов пользовательских устройств?
Вопрос конечно интересный, а процесс реализации и вовсе увлекательнейший. Конечно, макет модального окна, о котором сегодня пойдёт речь, скорее резиновый, так как адаптивность, в навороченных кругах, подразумевает наличие, прописных мета-тегов для мобильных устройств, медиа-запросов в css и прочие установленные «трендованными буржуинами» и еже сними, стандартами.
К теме создания модальных окон, я возвращался много раз, описывал способы с использованием jQuery и исключительно на чистом CSS3. В представленном сегодня примере объединил некоторые концепции и получилось то, что получилось. Не стоит принимать этот метод, как руководство к действию, скорее это, рабочий материал, поиски оптимальных решений.
Смотрите живой пример, а далее разберём немного по-подробнее составляющие.
Html разметка
Вызывается окно ударом по ссылке, адрес которой, должен соответствовать идентификатору того или иного модального блока. Объектом для ссылки может служить практически любой элемент, в примере использовал в виде более-менее оформленной кнопки:
Базовым контейнером, в который размещаем модальный блок с содержанием, является слой затемнения, чаще всего я выношу фон в отдельный div, в данном же случае, решил объединить в единую конструкцию все элементы. Тесты показали, что всё работает нормально, только вот с реализацией закрытия окна по клику вне зоны блока(по слою затемнения), возникают трудности.
Весь макет состоит из четырёх div-контейнеров с последовательной вложенностью, под формирование которых выделены отдельные классы в css, при использовании миниатюр или видео, добавляется ещё один блок. Ключевые свойства отвечающие за центрирование окна, оставляем как есть, экспериментируйте с формированием, как самого модального блока, так и внутренних элементов:
Наверное, для центрирования, вместо элементов блочной таблицы table-cell , проще было бы использовать трансформацию, свойство transform с отрицательными процентными значениями, но помимо того, что метод не работает в IE8 и необходимо использование префиксов, главное, он может мешать работе других эффектов с transform, а в некоторых случаях при рендеринге размываются края блока и текст. Хотя в случае с IE8, модальные окна на чистом CSS, так и так не срабатывают.
Для определения ширины модального блока, как вы видите, я использовал единицу измерения в em и установил максимальную ширину элемента max-width , так окно видоизменяется более корректно нежели при width: %;
Никаких дополнительных js-библиотек не подключал к работе, только магия CSS3. Модальный блок и слой затемнения, до поры до времени спрятал с газ долой(со страницы), с помощью display: block; . Прикрутил простенькую анимацию через @keyframes , с помощью свойства opacity , с небольшой задержкой, происходит плавный переход модального окна и слоя затемнения в открытое состояние. У кого появится желание, можете смело поэкспериментировать, благо примеров в сети предостаточно.
/* анимация при появлении затемнения и блоков с содержанием */ @-moz-keyframes fade < from < opacity: 0; >to < opacity: 1 >> @-webkit-keyframes fade < from < opacity: 0; >to < opacity: 1 >> @keyframes fade < from < opacity: 0; >to < opacity: 1 >>
Так и не найдя корректного, всех и вся удовлетворяющего способа остановки проигрывания видео при закрытии модального окна, собранного и работающего на CSS3, всё же включил в пример и вариант всплывающего блока с адаптивным видео. Решения по выключению видеоролика не то чтобы нет, есть, но оно не совсем кошерное, многих перекрученных веб-дел мастеров, просто переворачивает от использования пустующего атрибута href="/" в ссылке кнопки закрытия. Это и понятно, в таком случае видео останавливается посредством перезагрузки страницы, что не есть хорошо.
Видеоролики можете использовать как свои, размещённые у себя на сервере, так и с любого видеосервиса, предлагающего различные методы вставки видео на сайт через iframe, object или embed. Подробно о модальном блоке видео на css3, мы рассматривали ранее, в отдельном уроке, кому интересно, можете освежить память.
Все ключевые, функциональные элементы, используемые в формировании модального блока с содержанием, мы рассмотрели, мне остаётся показать весь код css, который получился в итоге, небольшие комментарии помогут вам разобраться что к чему и зачем:
На этом всё. Не буду утверждать, что всё без ошибок, тестировал во многих браузерах, про IE8 и ниже, сразу надо забыть, это что касается модального окна, центрирование и адаптивность элементов кроссбраузерные, вёрстка не едет при большом количестве текста в блоке, высота изменяемая.
Если что-то пропустил или же обнаружится ошибка, пишите в комментариях. Исходники упаковал в архив и выложил в облако на Яндекс, при возникшем вдруг желании, всегда можете их скачать.
С Уважением, Андрей .
Буду всем признателен, если поддержите проект — добавив блог в исключения AdBlock и поделитесь ссылкой на запись в своих соц-сетях:
Всего комментариев: 81
Здравствуйте!
Спасибо, классно!
Единственное замечание. Если страница большая (с вертикальной полосой прокрутки) а «кнопка», активирующая модальное окно, расположена в подвале, то при клике по ней, одновременно с открытием модального окна страница прокручивается вверх к самому началу. Можно ли сделать как-то так, что бы сама страница оставалась на месте?
Здравствуйте.
В селекторе .dm-overlay замените абсолютное позиционирование на фиксированное: position: fixed;
Ура! 🙂
И, если можно, ещё один вопрос…
Возможно ли сделать так, что бы модальное закрывалось не только по кнопке закрытия, расположенном в нём самом, но и при клике по любому месту на странице вне границ модального окна.
Подскажите пожалуйста, как прописать чтобы Модальное окно открывалось при загрузке страницы
В селекторе .dm-overlay смените абсолютное позиционирование на фиксированное position: fixed;
Затем, у меня в демо для body прописано свойство overflow: hidden; , если вы используете такую же конструкцию, просто исключите это свойство и содержание под модальным окном будет прокручиваться.
Еще раз спасибо, все работает
Ты просто Бог идентификаторов! От меня — величайшая благодарность! Крепко жму руку!
И все-таки! Как сделать, чтобы окно закрывалось при клике на темный фон? Пользователи нынче нервные — могут и ноутбук поломать.
Ну, раз так всё серьёзно, то самое простое, это использовать событие onclick для div-контейнера с модальным окном:
<div onclick="document.getElementById('win1').style.display='none';">
остаётся только следить чтобы идентификатор соответствовал тому или иному окошку. Всё!
Как поведёт себя данное решение на мобильных устройствах, не проверял, так как задача была немного другая ))).
Приветствую!
Подскажите, что делаю не так, скопировал так как указано в материале выше.
Задача: при нажатии на ссылку должно появляться модальное окно на весь экран с текстом.
Результат: окно с необходимым содержимым отображается постоянно, без «Х» для закрытия.
Заранее благодарю!
Вячеслав, доброго времени суток!
В статье всё разложено по полочкам, не один раз уже объяснял дополнительно, весь код с пояснениями, даже расписал в комментах вариант появления окна при загрузке сайта, хотя статья изначально совсем о другом))).
Мне трудно разглядеть, что вы делаете с исходниками, ещё труднее уловить полёт вашей фантазии.
Кидайте результаты своих экспериментов (исходники) мне на мыло, или же воспользуйтесь Jsfiddle, и я вам обязательно помогу.
Благодарю за такую оперативность! (like)
насколько связанно это с решением моего вопроса даже не представляю, вы как Профи может объясните:
Прочитав в очередной раз комменты, попробовал это X И о Чудо, все заработало )
p.s. Блог у Вас правильный, много чего почерпнул, думаю буду сюда захаживать в гости!
Замечательное решение. Просто нет слов.
Помогите пожалуйста! У меня есть кино сайт на движке DLE 10.2 настроен все работает но нету вкладки Трейлеры так вот я хочу сделать кнопку (Просмотреть трейлер) что бы когда на нее нажимали всплывало окно и видео с ютуба воспроизводилось. Но это не все мне нужно что бы было все просто то есть в создоном дополнительном поле мне нужно было бы вставить только ссылку на трейлер с ютуба и все. Я перепробовал кучу скриптов и модулей но они либо нарушали структуру сайта либо не работали. Не могли бы вы мне объяснить подробно как мне осуществить мою идею??
Могу помочь установить на ДЛЕ
Добрый день!
Вставил туда галерею адаптивную
не работает нормально ваша форма и галерея
подскажите что нуно делать для вставки туда различных плагинов
Добрый день, в примере у Вас на сайте, четвертое окно с видео, при закрытии окна — видео перестает воспроизводится. В исходниках, которые предлагается скачать, при закрытии окна видео продолжает воспроизводится. Что нужно добавить, чтобы корректно работало?
Да, поправила код, все работает, но если видеогалерея большая, как у меня, перезагрузка страницы при просмотре каждого видео, наверно, не очень хорошо. Нет ли возможности добавить маленький скрипт для закрытия окна? Я понимаю, что чистый CSS, но может быть как вариант?
Почитал коменты, разобрался. Спасибо за отличное решение.
Я так и не понял из коментов. Как этот вариант модального окна можно использовать на сайте, когда вы добавляете
html,
body overflow: hidden;
>
.
Понятно, что при overflow: hidden; для body, будет проблематично)) Не нужно смотреть на весь фарш демо-страницы, стили базовых элементов (html,body) исключительно для демо, просто не используйте это свойство, или же пропишите значение auto , .dm-overlay зафиксируйте. Про скролинг и варианты позиционирования, отвечал ранее в комментах.
Мне кажется нужно сразу писать так
.dm-overlay position:fixed;
z-index:1000;
overflow:auto;
top: 0;
left: 0;
display: none;
overflow: auto;
width: 100%;
height: 100%;
background: rgba (0, 0, 0, 0.65);
>
Это подойдет для 99% пользователей.
Алексей, полностью с вами согласен.
Спасибо за дополнение.
Можно сделать несколько иначе
Внутри блока dm-modal рядом с блоком wrap вставляешь
И для него добавляешь стили
.close_1 position: absolute;
width: 100%;
height: 100%;
top: 0;
display: block;
left: 0;
>
Здравствуйте.
В моей демке, такого косяка не просматривается, по крайней мере, я не замечал.
Могу предположить, что баг связан с анимацией. Чтобы проверить исключите свойства анимации из селектора .dm-overlay:target , просто закомментируйте:
/* -webkit-animation: fade .6s;
-moz-animation: fade .6s;
animation: fade .6s;
*/
Хотя мало вероятно, что дело именно в анимации, если так, то будем глубже копать.
Гораздо лучше)) Спасибо огромное)))
Правда блики идут небольшие)) Может ещё что-нибудь можно сделать?
Здравствуйте, Андрей! Просто счастье, что я нашла Ваш сайт, три дня билась с модальным окном, и спасение нашла только тут:) А вопрос был серьезный, могла подвести людей. Огромное спасибо Вам за множество полезностей!
С Наступающим Новым Годом! Я желаю Вам счастья!
Это лучшее из того, что я посмотрел в Топе Яндекса по выдаче «адаптивные модальные окна». Особый респект за комменты в CSS, поскольку чаще всего именно там непонятно. Побольше бы таких, как Вы и мир станет бесплатным)))
То, что доктор прописал! Спасибо за труды!
В CSS сделал всплывающее окошко. Активируется по клику на ссылку. Деактивируется по клику.
Вот после клика, страничка убегает вверх.
Как сделать, что бы после display: none; страничка не позиционировалась вверх?
CSS:
Спасибо за совет.
Утро вечера мудренее!
Решил вопрос, с помощью ссылки внутри документа.
Сколько уже было сломано копий о задачу выравнивания элементов на странице. Предлагаю вашему вниманию перевод отличной статьи с решением этой проблемы от Стефана Шоу (Stephen Shaw) для Smashing Magazine — Absolute Horizontal And Vertical Centering In CSS.
Я не первый, кто предложил это решение, однако такой подход редко применяется при вертикальном выравнивании. В комментариях к статье How to Center Anything With CSS Simon ссылается на пример jsFiddle, где приводится отличное решение для вертикального центрирования. Вот еще несколько источников на эту тему.
Рассмотрим способ поближе.
Достоинства
Недостатки
- Должна быть задана высота (см. Variable Height)
- Рекомендуется задать overflow: auto, чтобы контент не расползался
- Не работает на Windows Phone
Совместимость с браузерами
Внутри контейнера
Контент, размещенный в контейнер с position: relative будет прекрасно выравниваться:
С использованием viewport
Установим для контента position: fixed и зададим z-index:
Адаптивность
Главное преимущество описываемого способа — это прекрасная работа, когда высота или ширина задана в процентах, да еще и понимание min-width/max-width и min-height/max-height.
Смещения
Если на сайте присутствует фиксированная шапка или требуется сделать какой-то другой отступ, просто нужно добавить в стили код вроде top: 70px; Пока задан margin: auto; блок с контентом будет корректно центрироваться по высоте.
Еще можно выравнивать контент по нужной стороне, оставляя центрирование по высоте. Для этого нужно использовать right: 0; left: auto; для выравнивания справа или left: 0; right: auto; для выравнивания слева.
Много контента
Для того, чтобы большое количество контента не позволяло верстке разъезжаться, используем overflow: auto. Появится вертикальная прокрутка. Также можно добавить max-height: 100%; если у контента нет дополнительных отступов.
Изображения
Способ отлично работает и для изображений! Добавим стиль height: auto; тогда картинка будет масштабироваться вместе с контейнером.
Изменяемая высота
Описываемый способ требует заданной высоты блока, которая может быть указана в процентах и контролироваться с помощью max-height, что делает метод идеальным для адаптивных сайтов. Один из способов не задавать высоту — использование display: table. При этом блок контента центрируется независимо от размера.
Могут возникнуть проблемы с кроссбраузерностью, возможно следует использовать способ с table-cell (описан ниже).
- Firefox/IE8: использование display: table выравнивает блок вертикально по верхней границе документа.
- IE9/10: использование display: table выравнивает блок по левому верхнему углу страницы.
- Mobile Safari: если ширина задана в процентах, страдает горизонтальное центрирование
Другие способы
Описанный способ отлично работает в большинстве случаев, но есть и другие методы, которые могут быть применимы для решения специфических задач.
Отрицательный margin
Наверное, самый популярный способ. Подходит, если известны размеры блока.
- Не адаптивный
- Ползет верстка, если в контейнере слишком много контента
- Приходится компенсировать отступы или использовать box-sizing: border-box
Использование transform
Один из самых простых способов, поддерживает изменение высоты. Есть подробная статья на эту тему — "Centering Percentage Width/Height Elements" от CSS-Tricks.
- Не работает в IE 8
- Использование префиксов
- Может мешать работе других эффектов с transform
- В некоторых случаях при рендеринге размываются края блока и текст
Table-cell
Возможно один из самых лучших и простых способов. Подробно описан в статье "Flexible height vertical centering with CSS, beyond IE7" от 456bereastreet. Главный недостаток — дополнительная разметка: требуется аж три элемента:
- Изменяемая высота
- Верстка не едет при большом количестве текста в блоке
- Кроссбраузерность
Flexbox
Будущее CSS, flexbox будет решать множество сегодняшних проблем верстки. Подробно об этом написано в статье Smashing Magazine, которая называется Centering Elements with Flexbox.
Очень часто стоит задача выровнять блок по центру страницы / экрана, да ещё и так, чтобы без ява-скрипта, без задания жёстких размеров или отрицательных отступов, ещё чтобы и скроллбары работали у родителя, если блок превышает его размеры. В сети ходят достаточно много однообразных примеров как выровнять блок по центру экрана. Как правило большинство из них основаны на одних принципах.
Ниже представлены основные способы решения задачи, их плюсы и минусы. Чтобы понимать суть примеров, рекомендую уменьшить высоту / ширину окошка Result в примерах по указанным ссылкам.
Вариант 1. Отрицательный отступ.
Позиционируем блок атрибутами top и left на 50%, и заранее зная высоту и ширину блока, задаём отрицательный margin, который равен половине размера блока. Огромным минусом данного варианта является то, что нужно подсчитывать отрицательные отступы. Так же блок не совсем корректно ведёт себя в окружении скроллбаров — он попросту обрезается так как имеет отрицательные отступы.
Вариант 2. Автоматический отступ.
Менее распространённый, но схожий с первым. Для блока задаём ширину и высоту, позиционируем атрибутами top right bottom left на 0, и задаём margin auto. Плюсом данного варианта являются рабочие скроллбары у родителя, если у последнего задана 100% ширина и высота. Минусом данного способ является жёсткое задание размеров.
Вариант 3. Таблица.
Задаём родителю табличные стили, ячейке родителя устанавливаем выравнивание текста по центру. А блоку задаём модель строчного блока. Минусами мы получаем не рабочие скроллбары, и в целом не эстетичность «эмуляции» таблицы.
Вариант 4. Псевдо-элемент.
Данный вариант лишён всех проблем, перечисленных у предыдущих способов, а так же решает первоначально поставленные задачи. Суть состоит в том, чтобы у родителя задать стили псевдо-элементу before, а именно 100% высоту, выравнивание по центру и модель строчного блока. Так же само и у блока ставится модель строчного блока, выравнивание по центру. Чтобы блок не «падал» под псевдо-элемент, когда размеры первого больше чем родителя, указываем родителю white-space: nowrap и font-size: 0, после чего у блока отменяем эти стили следующими — white-space: normal. В данном примере font-size: 0 нужен для того, чтобы убрать образовавшийся пробел между родителем и блоком в связи с форматированием кода. Пробел можно убрать и иными способами, но лучшим считается просто его не допускать.
либо, если вам нужно, чтобы родитель занимал только высоту и ширину окна, а не всей страницы:
Вариант 5. Flexbox.
Одним из самых простых и элегантных способов является использования flexbox. Но имейте ввиду, что центральное позиционирование сохраняется даже если родительский блок меньше дочернего, последний будет выходить за рамки и обрезаться.
В случае, если при уменьшении родительского блока дочерний не должен обрезаться по краям, используйте авто маржины:
Вариант 6. Transform.
Подходит в случае если мы ограничены структурой, и нет возможности манипулировать родительским элементом, а блок выровнять как-то нужно. На помощь придёт css функция translate() . При значение 50% абсолютное позиционирование расположит верхний левый угол блока точно по центру, затем отрицательное значение translate сдвинет блок относительно своих собственных размеров. Учтите, что могут всплыть негативные эффекты в виде размытых граней или начертания шрифта. Также подобный способ может привести к проблемах с вычислением положения блока с помощью java-script'а. Иногда для компенсации потери 50% ширины из-за использования css свойства left может помочь заданное у блока правило: margin-right: -50%; .
Вариант 7. Кнопка.
Пользователь azproduction предложил вариант, где блок обрамляется в тег button. Кнопка имеет свойство центрировать всё, что находится у неё внутри, а именно элементы строчной и блочно-строчной (inline-block) модели. На практике использовать не рекомендую.
В этой статье я вам покажу, как выровнять страницу сайта по центру окна браузера, под любое разрешение экрана. Этот метод можно использовать, если страница имеет фиксированную ширину и в дальнейшем, это ширина не будет меняться в зависимости от контента. Этот способ выравнивания рекомендуется использовать начинающим дизайнерам, но в большинство случаев он используется и на сайтах больших компаний, потому что еще много людей используют маленькие мониторы и множество сайтов сделаны под разрешение экрана 1024х768. Значит, этот метод подходит для дизайна с фиксированной шириной. Давайте посмотрим на код страницы:
У нас получилось страница, выровнена по центру окна браузера.
Разберем CSS код страницы
В первую очередь убрали внешние (margin) и внутренние(padding) отступы у блока body т.к. у каждого браузера изначально заданы разные значения этих свойств для блока body. Эти значения больше чем 0px, поэтому мы их убираем.
Создали блок div и задали ему идентификатор с именем wrapper. Этот блок и есть обертка для нашей страницы.
Для блока div задали абсолютное позиционирование на 50% относительно левого края окна браузера. Могли бы задать и фиксированное позиционирование (position:fixed;) она аналогична абсолютной позиционирований, но в данном случае не смогли бы прокручивать страницу вертикально, поэтому отказались от этого значения. Ширину страницы задали 1000px для того чтобы поместилась в разрешение экрана 1024. 24px оставили для полосы вертикальной прокрутки. В итоге страница вместе с полосой прокрутки занимает 1024px, что естественно подойдет для всех экранов, которые поддерживают это разрешение.
Задали отрицательное значение для внешнего отступа margin в размере -500px, это занимает половину из размера блока div. Это значение заставляет блока div двигаться в сторону левого края браузера, на расстояние 500px, половины из своей ширины. Смотрим, как это выглядит в браузере.
Для абсолютного позиционирования задали left:50%; что соответствует половину из ширины блока, для того что бы страница начала позиционирование с пол страницы. Это свойство вместе с отрицательным левым отступом, делают, что бы страница выравнивалась прямо по центру в любой разрешений экрана.
Если Вы не знакомы с отрицательными значениями свойства margin, то я вам рекомендую почитать статью Отрицательные значения внешних полей в CSS.
Вот, и все что я вам хотел рассказать о выравнивании страницы по центру окна браузера. Теперь вы знаете один из методов как решить данную проблему. Желаю вам больших успехов.
Похожие статьи:
Видео:
Понравилась статья?
Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.
Читайте также: