Css модальное окно в модальном окне. Создаем модальное окно на HTML5 и CSS3. Размеры попапа зависят от содержимого
Привет всем, расскажу об одной очень удобной штуке, которая называется модальное окно, мы разберем, как сделать модальное окно? Многие не понимаю что это такое, я постараюсь объяснить на понятном для вас языке, другими словами — это всплывающее окно при нажатии на кнопку или текст.
Внутри этого окна, может быть любая информация (видео, картинка, код и т.д.) Я сейчас начал больше пользоваться модальным окном, как есть какой-то материал, который нужно допустим чтоб он не высвечивался на странице а допустим, была картинка, при нажатии на нее всплывало окно и информацией.
Я недавно делал такое на одном сайте, вставлял картинку на главной, даже не картинку а скриншот из видео ютуба, и при нажатии всплывает окно где показывает видео. Пример такого окна можно увидеть у меня на странице с игрой, принцип такой же, жмешь на картинку всплывает окно с игрой. Сделал так по скольку расширение игры больше по ширине, чем у меня колонка для контента, вот такой выход из ситуации я нашел.
Рассмотрим модальное окно на css, чтоб не морочить голову, будем использовать стили, то-есть прописывает стили в основном файле и код в наше окно, рассмотрим все в подробностях, что и как.
Модальное окно на css, как сделать модальное окноПервое что нам нужно это стили, копируем полностью код со стилями, который ниже и вставляем его в ваш основной файл стилей, то-есть в style.css
| 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 | . Window { position: fixed; font- family: Arial, Helvetica, sans- serif; top: 0 ; right: 0 ; bottom: 0 ; left: 0 ; background: rgba(0 , 0 , 0 , 0.7 ) ; z- index: 99999 ; - webkit- transition: opacity 400ms ease- in; - moz- transition: opacity 400ms ease- in; transition: opacity 400ms ease- in; display: none; pointer- events: none; } . Window: target { display: block; pointer- events: auto; } . Window > div { width: 460px; position: relative; margin: 10 % auto; padding: 30px 10px 10px; border- radius: 10px; background: #fff; box- shadow: 0px 0px 20px 2px; } . close { background: #cc3300; color: #FFFFFF; line- height: 25px; position: absolute; right: - 12px; text- align: center; top: - 10px; width: 24px; text- decoration: none; font- weight: bold; - webkit- border- radius: 12px; - moz- border- radius: 12px; border- radius: 12px; - moz- box- shadow: 1px 1px 3px #000; - webkit- box- shadow: 1px 1px 3px #000; box- shadow: 1px 1px 3px #000; } . close: hover { background: #990000; } |
Window { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.7); z-index: 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none; } .Window:target { display: block; pointer-events: auto; } .Window > div { width: 460px; position: relative; margin: 10% auto; padding: 30px 10px 10px; border-radius: 10px; background: #fff; box-shadow: 0px 0px 20px 2px; } .close { background: #cc3300; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #990000; }
Сохраняем, можно поиграться со стилями, и что-то сделать красивее, поменять фон, рамку другую сделать и так дальше. Переходим на страницу где вы хотите чтоб у вас всплывало данное окно, и вставьте следующий код:
| 1 2 3 4 5 6 7 | < a href= "#ModalOpen" title= "" > Кнопка < div id= "ModalOpen" class = "Window" > < div> < a href= "#close" title= "Закрыть" class = "close" > X Здесь будет содержимое окна |
Кнопка X Здесь будет содержимое окна
Теперь немного разберем что в нем, нужно вам поменять. Где прописано «Кнопка» там вы можете вставить, как картинку таи текст, вообще что хотите, то-есть при нажатии на её, будет открываться окно. Там где прописано «Здесь будет содержимое окна» вставьте то что вы бы хотели видеть в всплывающем окне, вот в принципе и все.
НОВОСТИ!
Ну и на по следок новость как всегда, что-то я зачастил с новостями уже)) Сделал себе небольшую страничку с партнерской программой, в виде , порошу всех перейти на нее и посмотреть, может кто-то даст еще какие-то советы интересные, например что-то дополнить, ну вы понимаете о чем я говорю. Еще есть некоторые мысли по ней, чтоб добавить видео со мной, может инструкцию, ну что-то в этом роде, Вообщем жду от вас комментарий!
Модальное окно - это контейнер, который при нажатии ссылки всплывает и предоставляет какую-либо информацию. Думаю многие уже знакомы с ним, ну если же нет посмотрите демо версию, чтобы понять что это такое. Сейчас их насчитывается огромное множество и каждый работает по своему. Например, есть совершенно стандартные , которые запрашивают выполнить какое то действие, в данном примере подтверждения. Или например, другой вариант, при первом заходе на сайт, которое актуально будет подходить под различные подписки на группы в социальных сетях. Есть модальные окна на чистом CSS , ну мне хотелось бы отвести эту долю JavaScript , так как на нем это более интереснее получается и не плохо работает во всех браузерах.
ШАГ ПЕРВЫЙ. Код JavaScript.
Чтобы запустить модальное окно, нужно передать функции значение window.onload . В котором мы будем передавать два элемента идентификатора "a " и "b ".
//передача элементов по id "a" и "b" window.onload = function() { a = document.getElementById("a"); b = document.getElementById("b"); }
Затем мы прописываем функцию "showA ", которая будет показывать модальное окно и передавать элементам "a " и "b " стили, а именно мы задали прозрачность, ширину и блокировку окна, если не была нажата ссылка "открыть ".
//показываем окно функции "showA" function showA() { //Задаем прозрачность и блокируем дисплей //элемента "b" b.style.filter = "alpha(opacity=80)"; b.style.opacity = 0.8; b.style.display = "block"; // Задаем блокироваку и отступ сверху в 200px //элемента "a" a.style.display = "block"; a.style.top = "200px"; }
После открытия модального окна, нам нужно как то его потом закрыть или скрыть, для этого прописываем функцию "hideA ", которая будет скрывать модальное окно и прописываем ей стили для элементов "a " и "b ".
//Вызываем функцию "hideA", которая будет скрывать //окно для элементов "a" и "b" function hideA() { b.style.display = "none"; a.style.display = "none"; }
Полный код.
//передача элементов по id "a" и "b" window.onload = function() { a = document.getElementById("a"); b = document.getElementById("b"); } //показываем окно функции "showA" function showA() { //Задаем прозрачность и блокируем дисплей //элемента "b" b.style.filter = "alpha(opacity=80)"; b.style.opacity = 0.8; b.style.display = "block"; // Задаем блокироваку и отступ сверху в 200px //элемента "a" a.style.display = "block"; a.style.top = "200px"; } //Вызываем функцию "hideA", которая будет скрывать //окно для элементов "a" и "b" function hideA() { b.style.display = "none"; a.style.display = "none"; }
ШАГ ВТОРОЙ. Код HTML.
Открыть
В теге "div" указываем идентификатор "a ", который будет взаимодействовать со стилями CSS и с кодом JavaScript . Далее прописываем еще один тег "div " и придаем ему идентификатор "windows ", который будет выполнять роль разметки внутри контейнера модального окна.
Внутри указываем ссылку, которая будет "закрывать " модальное окно, также придаем ей стиль "pages " и по умолчанию задаем ей стиль "float: right ", то есть будем отображать ссылку закрытия модального окна в верхнем правом углу.
Закрыть
Прописываем идентификатор "b ", который будет скрывать окно.
Полный код.
Открыть Закрыть
ШАГ ТРЕТИЙ. Код CSS.
Обязательные стили CSS , без которых модальное окно будет не правильно работать, а точнее вообще некорректно работать и отображать информацию.
И так первый обязательный стиль, касающийся позиции, в данном примере это fixed . Он позволяет отображать модальное окно, при этом ограничивая его с границей заливки. С помощью z-index мы указываем насколько модальное окно идентифицируется после нажатии ссылки "открыть ", а также "закрыть ". Также display: none , который позволяет скрывать модальное окно до нажатия ссылки.
#b { position:fixed; top:0; left:0; right:0; bottom:0; display:none; background: grey; z-index:1; } #a { border:1px solid black; position:fixed; background: #eff7ff; z-index:3; display:none; } #windows { padding:5px; width: 500px; height: 300px; border: 2px solid blue; } a.pages { background: #97cdff; color: white; padding: 4px; text-decoration: none; } a:hover.pages { background: red; color: white; padding: 4px; text-decoration: none; }
Всем огромное спасибо за Ваше внимание!
Судя по комментариям, тема создания модальных окон довольно популярна. Я не раз уже описывал различные техники исполнения, как с помощью jQuery, так и на чистом CSS. Да и в интернетах, информации по теме предостаточно, и каждый может выбрать для себя оптимальный вариант.
Меня больше интересуют решения без использования javascript, не потому-что у меня какая-то фобия к js, нет, мне просто интересны эксперименты, поиск новых возможностей связки html+css, тем более что в последнее время возможности эти существенно расширились.
Скрытые чебоксы() я пару раз использовал при разработке , почему бы не применить эту же методу и для реализации всплывающих(модальных) окон. Оказывается всё довольно просто, давайте рассмотрим подробнее, как с помощью свойств и новых синтаксических особенностей , можно быстро и без особых сложностей организовать на страницах своих сайтов работу привлекательных модальных окошек.
Посмотрите живой пример, протестируйте в разных браузерах и на различных устройствах, модальные окна отлично вписываются в любые размеры. В примере представил три варианта использования, стандартное диалоговое окно, интегрированная контактная форма и встроенная картинка в .
При формировании html-каркаса модального окна руководствовался принципами построения стандартной html-страницы, т.е. наше окно состоит из базового контейнера , который в свою очередь разделён на сектора, слой затемнения, модальный блок с заголовком , центральным блоком , и подвалом .
HTML КаркасНа ряду с использованием стандартных html-элементов тегов и , для определения состояния и свойства объектов, применил из состава HTML5-спецификации, в частности атрибут aria-hidden , который показывает состояние «hidden » у текущего элемента, в нашем случае это связка тегов и , определяющие элементы пользовательского интерфейса модальных окон.
Атрибут 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, что одновременно является и его единственным недостатком.
Поковыряться в коде можно .
В завершение, ещё раз посмотрите демо и при желании, для более детального разбора, скачивайте исходники, которые я бережно упаковал в архив, и выложил на своём Яндекс.Диске:
С Уважением, Андрей
Всем привет! В этом небольшом уроке мы создадим простое, но мощное по возможностям модальное окно на чистом 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 — это ограничения по размерам (чтобы он не раздавался в высоту и ширину). И ещё один небольшой нюанс — код с модальным окном рекомендую, по возможности, распологать перед закрывающим тегом .
Вот так можно быстро сделать модальное окно. Этот код, который мы написали, можно использовать в базовом варианте, дописывая нужные стили по необходимости.
Надеюсь, мой урок был для Вас полезен. Доброго Вам времени суток и до новой встречи на Веб-Островах!
Модальное окно – маленькое окошко, которое всплывает, чтобы сказать о чем то важном. Сложно ли сделать модальное окно без 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 { /* все что мы уже выше описали */ z-index: 1010; } .modal-overlay { z-index: 1000; position: fixed; top:0; left:0; width: 100%; height: 100%; }
Закрывать классом, а не открывать классомЯ заметил распространенное явление, когда по умолчанию .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"); });
