Всплывающее окно на HTML и CSS. Создаем модальное окно с помощью HTML5 и CSS3 Простое модальное popup окно
Судя по комментариям, тема создания модальных окон довольно популярна. Я не раз уже описывал различные техники исполнения, как с помощью jQuery, так и на чистом CSS. Да и в интернетах, информации по теме предостаточно, и каждый может выбрать для себя оптимальный вариант.
Меня больше интересуют решения без использования javascript, не потому-что у меня какая-то фобия к js, нет, мне просто интересны эксперименты, поиск новых возможностей связки html+css, тем более что в последнее время возможности эти существенно расширились.
Скрытые чебоксы() я пару раз использовал при разработке , почему бы не применить эту же методу и для реализации всплывающих(модальных) окон. Оказывается всё довольно просто, давайте рассмотрим подробнее, как с помощью свойств и новых синтаксических особенностей , можно быстро и без особых сложностей организовать на страницах своих сайтов работу привлекательных модальных окошек.
Посмотрите живой пример, протестируйте в разных браузерах и на различных устройствах, модальные окна отлично вписываются в любые размеры. В примере представил три варианта использования, стандартное диалоговое окно, интегрированная контактная форма и встроенная картинка в .
При формировании html-каркаса модального окна руководствовался принципами построения стандартной html-страницы, т.е. наше окно состоит из базового контейнера
HTML Каркас
На ряду с использованием стандартных html-элементов тегов и
Атрибут for это ничто иное как идентификатор элемента, с которым следует установить связь, при использовании на одной странице нескольких модальных окон с различным содержанием, следует помнить о том, что идентификатор должен быть разным, установленным в соответствии с id
того или иного мод. окна, for="modal-1" , for="modal-2" и т.д.
CSS
Стилистика внешнего вида модального окна напоминает стиль всплывающих окошек из набора элементов Bootstrap, в случае необходимости, очень легко меняется в CSS. Непосредственно в код css прописал краткие комментарии, так что, вам будет легче разобраться, что к чему и зачем))).
| /* Стили модального окна */ .modal-header h2 { color : #555 ; font-size : 20px ; font-weight : normal ; line-height : 1 ; margin : 0 ; } /* кнопка закрытия окна */ .modal .btn-close { color : #aaa ; cursor : pointer ; font-size : 30px ; text-decoration : none ; position : absolute ; right : 5px ; top : 0 ; } .modal .btn-close : hover { color : red ; } /* слой затемнения */ .modal-wrap : before { content : "" ; display : none ; background : rgba (0 , 0 , 0 , .3) ; position : fixed ; top : 0 ; left : 0 ; right : 0 ; bottom : 0 ; z-index : 101 ; } .modal-overlay { bottom : 0 ; display : none ; left : 0 ; position : fixed ; right : 0 ; top : 0 ; z-index : 102 ; } /* активация слоя затемнения и модального блока */ .modal-open : checked ~ .modal-wrap : before , .modal-open : checked ~ .modal-wrap .modal-overlay { display : block ; } .modal-open : checked ~ .modal-wrap .modal-dialog { -webkit-transform: translate (-50% , 0 ) ; -ms-transform: translate (-50% , 0 ) ; -o-transform: translate (-50% , 0 ) ; transform : translate (-50% , 0 ) ; top : 20% ; } /* элементы модального окна */ .modal-dialog { background : #fefefe ; border : none ; border-radius : 5px ; position : fixed ; width : 80% ; max-width : 500px ; left : 50% ; top : -100% ; -webkit-box-shadow: 0 15px 20px rgba (0 , 0 , 0 , .22) , 0 19px 60px rgba (0 , 0 , 0 , .3) ; -moz-box-shadow: 0 15px 20px rgba (0 , 0 , 0 , .22) , 0 19px 60px rgba (0 , 0 , 0 , .3) ; box-shadow : 0 15px 20px rgba (0 , 0 , 0 , .22) , 0 19px 60px rgba (0 , 0 , 0 , .3) ; -webkit-transform: translate (-50% , -500% ) ; -ms-transform: translate (-50% , -500% ) ; -o-transform: translate (-50% , -500% ) ; transform : translate (-50% , -500% ) ; -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; -o-transition: -o-transform 0.4s ease-out; transition : transform 0.4s ease-out; z-index : 103 ; } .modal-body { padding : 20px ; } .modal-body p { margin : 0 ; } .modal-header, .modal-footer { padding : 20px 20px ; } .modal-header { border-bottom : #eaeaea solid 1px ; } .modal-header h2 { font-size : 20px ; margin : 0 ; } .modal-footer { border-top : #eaeaea solid 1px ; text-align : right ; } /* адаптивные картинки в модальном блоке */ .modal-body img { max-width : 100% ; height : auto ; } /* кнопки */ .btn { background : #fff ; border : #555 solid 1px ; border-radius : 3px ; cursor : pointer ; display : inline-block ; font-size : 14px ; padding : 8px 15px ; text-decoration : none ; text-align : center ; min-width : 60px ; position : relative ; } .btn : hover , .btn : focus { background : #f2f2f2 ; } .btn-primary { background : #428bca ; border-color : #357ebd ; color : #fff ; } .btn-primary : hover { background : #66A1D3 ; } |
/* Стили модального окна */ .modal-header h2 { color: #555; font-size: 20px; font-weight: normal; line-height: 1; margin: 0; } /* кнопка закрытия окна */ .modal .btn-close { color: #aaa; cursor: pointer; font-size: 30px; text-decoration: none; position: absolute; right: 5px; top: 0; } .modal .btn-close:hover { color: red; } /* слой затемнения */ .modal-wrap:before { content: ""; display: none; background: rgba(0, 0, 0, .3); position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 101; } .modal-overlay { bottom: 0; display: none; left: 0; position: fixed; right: 0; top: 0; z-index: 102; } /* активация слоя затемнения и модального блока */ .modal-open:checked ~ .modal-wrap:before, .modal-open:checked ~ .modal-wrap .modal-overlay { display: block; } .modal-open:checked ~ .modal-wrap .modal-dialog { -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); top: 20%; } /* элементы модального окна */ .modal-dialog { background: #fefefe; border: none; border-radius: 5px; position: fixed; width: 80%; max-width: 500px; left: 50%; top: -100%; -webkit-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -moz-box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); box-shadow: 0 15px 20px rgba(0,0,0,.22),0 19px 60px rgba(0,0,0,.3); -webkit-transform: translate(-50%, -500%); -ms-transform: translate(-50%, -500%); -o-transform: translate(-50%, -500%); transform: translate(-50%, -500%); -webkit-transition: -webkit-transform 0.4s ease-out; -moz-transition: -moz-transform 0.4s ease-out; -o-transition: -o-transform 0.4s ease-out; transition: transform 0.4s ease-out; z-index: 103; } .modal-body { padding: 20px; } .modal-body p { margin: 0; } .modal-header, .modal-footer { padding: 20px 20px; } .modal-header { border-bottom: #eaeaea solid 1px; } .modal-header h2 { font-size: 20px; margin: 0; } .modal-footer { border-top: #eaeaea solid 1px; text-align: right; } /* адаптивные картинки в модальном блоке */ .modal-body img { max-width: 100%; height: auto; } /* кнопки */ .btn { background: #fff; border: #555 solid 1px; border-radius: 3px; cursor: pointer; display: inline-block; font-size: 14px; padding: 8px 15px; text-decoration: none; text-align: center; min-width: 60px; position: relative; } .btn:hover, .btn:focus { background: #f2f2f2; } .btn-primary { background: #428bca; border-color: #357ebd; color: #fff; } .btn-primary:hover{ background: #66A1D3; }
Если вам не нужен какой либо из разделов, например нет надобности в заголовке, просто исключите
Для примера, использовал немного видоизменённую форму обратной связи, о вёрстке которой . Все элементы формы замечательно подстраиваются под размеры окна при просмотре на различных экранах пользовательских устройств.
| /* Элементы формы контактов */ .textbox{ height : 45px ; width : 100% ; border-radius : 3px ; border : rgba (0 , 0 , 0 , .3) 1px solid ; box-sizing : border-box ; font-size : 14px ; padding : 8px ; margin-bottom : 20px ; } .message : focus , .textbox : focus { outline : none ; border : rgba (24 , 149 , 215 , 1 ) 1px solid ; color : rgba (24 , 149 , 215 , 1 ) ; } .message{ background : rgba (255 , 255 , 255 , 0.4 ) ; width : 100% ; height : 120px ; border : rgba (0 , 0 , 0 , .3) 1px solid ; box-sizing : border-box ; -moz-border-radius: 3px ; font-size : 14px ; -webkit-border-radius: 3px ; border-radius : 3px ; display : block ; padding : 10px ; margin-bottom : 20px ; overflow : hidden ; } /* кнопка "отправить" формы */ .btn-form{ width : 100% ; height : 45px ; border : rgba (0 , 0 , 0 , .2) 1px solid ; box-sizing : border-box ; background : #dedede ; color : #555 ; transition : background .4s ; } /* Изменение фона кнопки при наведении */ .btn-form : hover { background : #f2f2f2 ; } |
/* Элементы формы контактов */ .textbox{ height:45px; width:100%; border-radius:3px; border:rgba(0,0,0,.3) 1px solid; box-sizing:border-box; font-size:14px; padding:8px; margin-bottom:20px; } .message:focus, .textbox:focus{ outline:none; border:rgba(24,149,215,1) 1px solid; color:rgba(24,149,215,1); } .message{ background: rgba(255, 255, 255, 0.4); width:100%; height: 120px; border:rgba(0,0,0,.3) 1px solid; box-sizing:border-box; -moz-border-radius: 3px; font-size:14px; -webkit-border-radius: 3px; border-radius: 3px; display:block; padding:10px; margin-bottom:20px; overflow:hidden; } /* кнопка "отправить" формы */ .btn-form{ width:100%; height:45px; border:rgba(0,0,0,.2) 1px solid; box-sizing:border-box; background: #dedede; color:#555; transition:background .4s; } /* Изменение фона кнопки при наведении */ .btn-form:hover{ background: #f2f2f2; }
Многие, очень многие, используют модальные окна для демонстрации различных изображений, так что предусмотрел и этот вариант. Картинкам, встраиваемым в тело окна, задал 100% ширину max-width: 100%; , при автоматическом определении высоты height: auto; , с помощью чего, изображения будут корректно отображаться при изменении размеров окна в ту или в другую сторону, получается такая вот адаптивность)).
Чтобы получить эффект lightbox, когда изображение заполняет всё пространство всплывающего блока, достаточно убрать div заголовка, нижний блок с кнопкой и выставить необходимые отступы внутри модального окна, в селекторе.modal-body .
Если вдруг, захотите разместить в модальном окне видеоролик с YoTube, или другого видео-сервиса, воспользуйтесь способом, о котором я . Только следует помнить о том, что оптимального решения остановки проигрывания видео после закрытия окна, без подключения js, до сих пор не найдено, придётся довольствоваться не очень «кошерными» методами.
На этом всё! Остаётся лишь напомнить, что данный способ отлично будет работать только в современных браузерах, безоговорочно поддерживающих свойства CSS3, что одновременно является и его единственным недостатком.
Поковыряться в коде можно .
В завершение, ещё раз посмотрите демо и при желании, для более детального разбора, скачивайте исходники, которые я бережно упаковал в архив, и выложил на своём Яндекс.Диске:
С Уважением, Андрей
Для вывода важных сообщений или просто изменений, произведённых на сайте, можно использовать всплывающие окна. Всплывающие окна бывают двух видов: обычные и модальные.
Примечание: модальные окна отличаются от обычных тем, что пока модальное окно открыто пользователь не может взаимодействовать с другими элементами сайта до тех пор, пока не закроет модальное окно.
Посмотреть пример модального окна можно с помощью JavaScript, воспользовавшись методом alert() .
Всплывающее окно
Первым шагом создания всплывающего окна является создание элемента
Этот
Используя псевдо-класс:target мы выбираем и применяем стили к элементу, к которому был осуществлён переход. Таким образом после перехода по ссылки значение свойства display элемента
Теперь надо расположить
#okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; /*позиционируем и центрируем*/ position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; }
Следующим шагом будет реализация скрытия окна, при нажатии на любое место страницы или на само окно. Для этого нам нужно расположить элемент
Затем мы позиционируем элемент и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем нашу ссылку на него:
У элемента
На этом создание простого всплывающего окна закончено.
Модальное окно
Для создания всплывающего модального окна, берём элемент
Следующим шагом в создании полноценного модального окна будет добавление кнопки, которая будет скрывать наше окно. Кнопку сделаем из обычной ссылки, добавив её к нашему
Закрыть окно
Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный
Закрыть окно
Позиционируем родительский
У дочернего
Закрыть окно
Примечание: если вам нужно, чтобы при заходе на страницу пользователь сразу видел всплывающее окно (а не вызывал его по ссылке), то адрес страницы надо будет прописывать вместе с id окна (например адрес может выглядеть так: site.ru/papka/documet.html#okno).
Модальное окно – маленькое окошко, которое всплывает, чтобы сказать о чем то важном. Сложно ли сделать модальное окно без Bootstrap? Попробуем разобраться.
Куда вставить в DOM?
Обычно, я помещаю его перед закрывающим тэгом body.
В основном по причине стилей. Намного легче позиционировать модальное окно на CSS, когда вы имеете дело со слоем обертывающим весь body, чем с неизвестным набором родительских элементов, у которого потенциально может быть свое позиционирование.
Центрирование
Вот один из моих любимых трюков, когда вы можете отцентровать и вертикально и горизонтально, без знания высоты и ширины.
Modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); }
Это очень удобно так как, открытое модальное окно обычно должно находится прямо по центру, несмотря на ширину. Высота, тем более скорее всего изменится, так как она зависит от контента внутри.
Position – fixed?
Обратите внимание мы использовали position: fixed; чтобы пользователи могли иметь возможность скроллить вниз, в то время как открытое модальное окно оставалась всегда посередине. Я считаю, в целом, что значение fixed уже можно смело использовать, даже на мобильных устройствах. Однако, если вам нужно учесть старые телефоны, попробуйте заменить значением absolute.
Разберемся с шириной
На больших экранах, типичное открытое модальное окно не только отцентровано, но и ограниченно по ширине.
Modal { width: 600px; }
Однако, есть такие экраны, которые меньше 600px в ширину. Чтобы исправить ситуацию добавим максимальную ширину.
Modal { width: 600px; max-width: 100%; }
Высота
Задавать высотку еще более ответственное занятие. Мы знаем, что контент имеет свойство меняться. Плюс, техника центрирования через transform радостно обрезает края, без появления скролл-бара. Установка максимальной высоты обезопасит нас второй раз.
Modal { height: 400px; max-height: 100%; }
Overflow
После того как мы разобрались с высотой, пришло время заняться свойством overflow. Распространенно использовать overflow значение, прямо в.modal, однако, есть две проблемы с этим:
- Мы можем захотеть использовать элементы, которые не должны скролиться
- Overflow обрежет тень, которую мы будем использовать.
Я бы предложил использовать внутренний контейнер:
Учитывая, что у нас будет контент который нужно скролить, нам нужно задать высоту. Есть несколько вариантов. Вот один из них:
Modal-guts { position: absolute; top: 0; left: 0; width: 100%; height: 100%; /* отступы */ padding: 20px 50px 20px 20px; /* разрешим скролить */ overflow: auto; }
Кнопки
Идея использования модальных окон в том, чтобы принудить выполнить какое-либо действие, перед тем, как что-нибудь будет сделано. Сделать кнопку закрытия окна видной в любом состоянии кажется не плохой идеей.
Разберемся с затемнением
Обычное модальное окно делают с полностью затемняющимся фоном. Это полезно по нескольким причинам:
- оно может затемнить остальной экран
- может предотвратить клики/взаимодействие с контентом вокруг модального окна
- может использоваться, как гигантская кнопка закрытия
Типичный пример использования:
Закрывать классом, а не открывать классом
Я заметил распространенное явление, когда по умолчанию .modal класс скрыт, как например display: none; Потом, чтобы открыть, добавляют класс .modal.open {display: block;}
Однако, это может быть и плохо, потому что ваша модальное окно может быть display: flex; и display: block; его перепишет.
Modal { .display: flex; } .modal.closed { display: none; }
Добавим JavaScript
var modal = document.querySelector("#modal"), modalOverlay = document.querySelector("#modal-overlay"), closeButton = document.querySelector("#close-button"), openButton = document.querySelector("#open-button"); closeButton.addEventListner("click", function(){ modal.classList.toggle("closed"); modalOverlay.classList.toggle("closed"); }); openButton.addEventListner("click", function(){ modal.classList.toggle("closed"); modalOverlay.classList.toggle("closed"); });Всем привет! В этом небольшом уроке мы создадим простое, но мощное по возможностям модальное окно на чистом CSS. И заодно повторим (а для кого и откроем) такую полезную вещь как flexbox. При этом мы будем создавать не просто модальное окно, которое открывается по клику, а которое позиционируется точно по центру экрана. Когда-то давно такое можно было проделать только с помощью javascript, но время идёт и теперь такое можно сделать с помощью буквально 4 строчек кода.
Открыть модальное окно
Контент внутри окна
Всё это модальное окно состоит как бы из двух слоёв — первый слой, который имеет класс ModalWindow , затемняет всё пространство вокруг модального окна и будет выравнивать содержание окна по центру экрана. Второй слой — класса Modal_Body — содержит непосредственно сам контент модального окна.
Теперь создадим CSS-код для этой разметки:
Modal { position: fixed; display: none; top: 0; right: 0; bottom: 0; left: 0; z-index: 0; background: rgba(0,0,0,0.7); pointer-events: none; } .Modal:target { display: flex; pointer-events: auto; } .Modal_Body { position: relative; z-index: 2; display: block; margin: auto; padding: 15px; background: #FFF; } .ModalFull { position: absolute; display: block; z-index: 0; width: 100%; height: 100%; }
Посмотрим сейчас на работу модального окна и разберёмся с тем, как он работает.
Как мы видим, при нажатии на «Открыть модальное окно» всё окно затеняется, а ровно по центру появляется белое модальное окно. На этом пока остановимся и посвятим себя теории.
Поскольку мы договорились не использовать javascript и не можем с помощью негоотслеживать нажатия на элементы, мы можем легко это сделать с помощью css-псевдокласса и якорной ссылки с хешем (для указания элемента на данной странице) и id cо значением, обязательно равным указателю в ссылке. Посмотрите на наш пример: href ссылки и id основного контейнера модального окна имеют одно и то же значение — ModalWindow . Это важно, поскольку браузер должен понимать, какие элементы будут взаимодействовать друг с другом.
В нашем случае общий контейнер модального окна скрыт и, соответственно, скрыто всё содержание модального окна. Но при нажатии на ссылку элемент получает псевдокласс :target и соответственно появляется. Посмотрите в css-код — свойство display меняется с none на flex . Заметьте, именно flex, поскольку с помощью него мы можем выровнить Modal_Body ровно по центру экрана. Все остальные стили мы прописали для него сразу.
Кстати, если вы не совсем поняли, как его так расплющило по всей поверхности экрана, рассказываю — всё дело в следующих 4-х строчках:
Top: 0; right: 0; bottom: 0; left: 0;
Мы указали, что он как-бы должен быть в нулевом пикселе справа, слева, сверху и снизу одновременно. Вместо этого можно использовать, например, такую констукцию:
Width: 100%; height: 100vh;
Здесь мы указываем ширину, равную 100% экрана, а вот высоту лучше установить с помощью viewport height — высоты окна браузера. Я же остановлюсь на своём варианте.
Ещё один важный нюанс — это значение свойства z-index у Modal и Modal_Body . Они должны быть обязательно, и у Modal_Body он обязательно должен быть больше по значению по крайней мере на одну единицу, иначе контент модального окна не будет доступен — ссылки и кнопки будет невозможно нажать. А если там будет предусмотрен контент с прокруткой, то это тоже работать не будет, поскольку один элемент будет перекрывать другой.
Продолжим творить свой шедевр. При нажатии модальное окно появляется, но так же просто закрыть мы его не можем. Давайте добавим кнопку для его закрытия:
Контент внутри окна
ЗакрытьСобственно, она отменяет :target для нашего модального окна и то просто принимает начальное положение — скрывается с глаз долой. Но с этой ссылкой есть некоторая тонкость — при её нажатии браузер попытается найти такой элемент, но потерпит фиаско, и промотает страницу к самому началу. Такое поведение — одно из небольших минусов такого подхода к изготовлению модальных окон, но и с ним можно справиться.
Для этого атрибут href у ссылки мы меняем с «#» на «#ModalWindowClose» , а у ссылки-кнопки, которая открывала окно, дописываем атрибут id c таким же значением. Можно использовать и атрибут name , но в HTML5 для определения якоря лучше и требуется указывать атрибут id .
Открыть модальное окно
Контент внутри окна
ЗакрытьТеперь при нажатии браузер будет откатываться обратно к кнопке. Ради правды хочу сказать, что этот якорь будет располагаться по верхнему краю экрана. Но, если эта кнопка для открытия находится в header’e или footer’e, то это проблема нивелируется. А если у header’a сделано фиксированное положение, то будет вообще отлично — например, для заказа обратного звонка или предварительного заказа/консультации подойдёт отлично и при закрытии окна.
Вот пример того, что у нас получилось:
Можно ещё немного доработать контейнер Modal_Body — это ограничения по размерам (чтобы он не раздавался в высоту и ширину). И ещё один небольшой нюанс — код с модальным окном рекомендую, по возможности, распологать перед закрывающим тегом