Как сделать модальное окно css. Создаем модальное окно с помощью HTML5 и CSS3. Разберемся с затемнением

В данном уроке мы научися создавать модальное окно с помощью HTML5 и CSS3. В уроке мы не будем использовать JS, только полностью CSS3. Модальные окна можно использовать для формы обратной связи, для фото и видео и еще есть множество вариантов его применения.

Начинаем делать наше модальное окно.

Шаг 1. Разметка HTML

Первым делом нам нужно сделать HTML-разметку, т.е. сделать ссылку по которой будет открываться окно, и сделать каркас нашего окна. Для этого пишем вот такой код:

Шаг 2. Содержимое модального окна

Теперь добавим само содержимое нашего окна. Сделаем заголовок и небольшой текст и поместим это все в тег и вставим в код вместо многоточия . Еще нужно вставить ссылку, по которой будет закрываться наше окно и придать ей class="close" . Вот так должен выглядеть ваш код:

ПРОЕКТ REDSTAR

REDSTAR - проект посвященный вопросам, которые Вас так давно интересовали. На данном проекте размещены бесплатные уроки и статьи по различным темам. Темы очень разнообразны, начиная от простой установки Windows и заканчивая разработкой сайтов.

Шаг 3. Стили

Теперь начинаем писать стили для нашего окна. В этом шаге мы сделаем невидимым наше окно. Оно будет появляться только по нажатию на ссылку. Для этого пишем стили для нашего класса modalDialog :

ModalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; opacity:0; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none; }

Шаг 4. Функционал и просмотр

В этом шаге мы сделаем так, чтобы наше окно уже начало функционировать. Для этого добавим еще несколько стилей для нашего класса modalDialog :

ModalDialog:target { opacity:1; pointer-events: auto; display: block; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #b8ecfb); background: -webkit-linear-gradient(#fff, #b8ecfb); background: -o-linear-gradient(#fff, #b8ecfb); }

На этом шаге вы уже можете просмотреть ваше окно, оно уже функционирует. Но, кнопка close выглядет не очень красиво.

Теперь нам нужно дописать стили для нашего класса close .

Шаг 5. Делаем кнопку close

В этом шаге мы улучшим внешний вид нашей кнопки, которая будет закрывать наше окно. Для этого пишем стили для нашего класса close :

Close { background: #606061; 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: #860015;}

Ну теперь наша кнопка выглядет так, как и задумывалось. У вас она должна выглядеть также:

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

Привет всем, расскажу об одной очень удобной штуке, которая называется модальное окно, мы разберем, как сделать модальное окно? Многие не понимаю что это такое, я постараюсь объяснить на понятном для вас языке, другими словами — это всплывающее окно при нажатии на кнопку или текст.

Внутри этого окна, может быть любая информация (видео, картинка, код и т.д.) Я сейчас начал больше пользоваться модальным окном, как есть какой-то материал, который нужно допустим чтоб он не высвечивался на странице а допустим, была картинка, при нажатии на нее всплывало окно и информацией.

Я недавно делал такое на одном сайте, вставлял картинку на главной, даже не картинку а скриншот из видео ютуба, и при нажатии всплывает окно где показывает видео. Пример такого окна можно увидеть у меня на странице с игрой, принцип такой же, жмешь на картинку всплывает окно с игрой. Сделал так по скольку расширение игры больше по ширине, чем у меня колонка для контента, вот такой выход из ситуации я нашел.

Рассмотрим модальное окно на 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 Здесь будет содержимое окна

Теперь немного разберем что в нем, нужно вам поменять. Где прописано «Кнопка» там вы можете вставить, как картинку таи текст, вообще что хотите, то-есть при нажатии на её, будет открываться окно. Там где прописано «Здесь будет содержимое окна» вставьте то что вы бы хотели видеть в всплывающем окне, вот в принципе и все.

НОВОСТИ!

Ну и на по следок новость как всегда, что-то я зачастил с новостями уже)) Сделал себе небольшую страничку с партнерской программой, в виде , порошу всех перейти на нее и посмотреть, может кто-то даст еще какие-то советы интересные, например что-то дополнить, ну вы понимаете о чем я говорю. Еще есть некоторые мысли по ней, чтоб добавить видео со мной, может инструкцию, ну что-то в этом роде, Вообщем жду от вас комментарий!

Судя по комментариям, тема создания модальных окон довольно популярна. Я не раз уже описывал различные техники исполнения, как с помощью 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, что одновременно является и его единственным недостатком.

Поковыряться в коде можно .
В завершение, ещё раз посмотрите демо и при желании, для более детального разбора, скачивайте исходники, которые я бережно упаковал в архив, и выложил на своём Яндекс.Диске:

С Уважением, Андрей

Модальное, либо всплывающее окно (называют по-разному) – это очень распространённый применяемый на веб-сайте. Основное его назначение это вывод различной информации (в основном текстовой и при наличие нескольких картинок), которая появляется при нажатие на какой-либо специальный объект (ссылка, кнопка или фото).

В модальное окно, в большинстве случаев для экономии места на сайте, прописывают не особо важную информацию, например как: обратная связь, авторизация, либо .

Бывают случаи, когда веб-мастера желают привлечь внимание посетителя каким-то важным событием, к примеру: для получения бонусов и подарков, участие в акциях и розыгрышах, и т.п., и модальные окна всплывают без участия и желания посетителя.

Кто-то делает для этих целей модальное окно при открытии страницы, которое появляется на странице через определенный промежуток времени используя разумеется java скрипт, а другой хочет разными способами оставить посетителя на своём сайте и использует модальное окно при закрытии страницы, которое всплывает в тот момент, когда клиент хочет уже покинуть и закрыть страницу.

Первый пример всплывающего модального окна.

Для того, чтобы сделать модальное окно применяя только css, необходимо прописать html код для ссылающего объекта на всплывающее окно и в стилевом файле назначить параметры и свойства для правильного отображения красивого модального окна.

.my_modal{position:fixed;top:0;right:0;bottom:0;left:0;background:rgba(0,0,0,0.5);z-index:1050;display:none;margin:0;padding:0;}.my_modal:target{display:block;overflow-y:auto;}.my_modal-dialog{position:relative;width:auto;margin:10px;}@media (min-width:576px){.my_modal-dialog{max-width:460px;margin:30px auto;}}.my_modal-content{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;background-color:#fff;-webkit-background-clip:padding-box;background-clip:padding-box;border:1px solid rgba(0,0,0,.2);border-radius:6px;outline:0;}@media (min-width:768px){.my_modal-content{-webkit-box-shadow:0 5px 15px rgba(0,0,0,.5);box-shadow:0 5px 15px rgba(0,0,0,.5);}}.my_modal-header{display:block;padding:14px 14px 4px;}.my_modal-title{margin-top:0;margin-bottom:0;line-height:1.5;font-size:1.25rem;font-weight:500;border-bottom:1px solid #d4d4d4;}.close{padding:1px 5px 0;border:1px solid #000;border-radius:50%;font-family:sans-serif;font-size:24px;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5;text-decoration:none;top:4px;right:4px;position:absolute;}.close:focus,.close:hover{color:#000;text-decoration:none;cursor:pointer;opacity:.75;}.my_modal-body{position:relative;-webkit-box-flex:1;-webkit-flex:1 1 auto;-ms-flex:1 1 auto;flex:1 1 auto;padding:15px;overflow:auto;} Открыть модальное окно

Заголовок модального окна

×

Здесь прописана текстовая информация модального окна...

Скопируйте, вставьте и сохраните вышеуказанный код в текстовый документ под именем index.html и после откройте его в браузере для проверки работоспособности модального окна. Здесь же вы можете и подкорректировать внешний вид модального окна исходя из дизайна вашего проекта.

Я к примеру, для вывода определённой информации частенько использую модальное окно в качестве с различными анимационными эффектами, что смотрится куда-более интересным.

Модальное окно при нажатии на кнопку

В этом примере я покажу как прописать кнопку для открытия модального окна.
Для этого нам нужно лишь добавить в коде для кнопки и для блока модального окна атрибут HTML onclick и тем самым вызвать функцию с определённым именем.

Пример кнопки для вызова модального окна (нажмите).

Модальное окно кнопка

#overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: 999; overflow: auto; visibility:hidden; opacity: 0; transition: opacity 0.7s ease-in 0s; } .popup { top: 10%; left: 0; right: 0; font-size: 14px; margin: auto; width: 80%; min-width: 200px; max-width: 600px; position: absolute; padding: 15px 20px; border: 1px solid #666; background-color: #fefefe; z-index: 1000; border-radius: 10px; font: 14px/18px "Tahoma", Arial, sans-serif; box-shadow: 0 0px 14px rgba(0, 0, 0, 0.4); } .close { top: 10px; right: 10px; width: 32px; height: 32px; position: absolute; border: none; border-radius: 50%; background-color: rgba(0, 130, 230, 0.9); box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.16), 0 2px 10px 0 rgba(0, 0, 0, 0.12); cursor: pointer; outline: none; } .close:before { color: rgba(255, 255, 255, 0.9); content: "X"; font-family: Arial, Helvetica, sans-serif; font-size: 14px; font-weight: normal; text-decoration: none; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); } .close:hover { background-color: rgba(180, 20, 14, 0.8); } #overlay .popup p.zag{margin:20px 0 10px;padding:0 0 6px;color:tomato;font-size:16px;font-weight:bold;border-bottom:1px solid tomato;}

Потом скопируйте и вставьте html код модального окна:

Модальное окно

Первая текстовая информация...

Вторая текстовая информация...

Последующая текстовая информация...

Модальное окно

И последнее, пропишите перед скрипт для вызова и закрытия модального окна:

var b = document.getElementById("overlay"); function swa(){ b.style.visibility = "visible"; b.style.opacity = "1"; b.style.transition = "all 0.7s ease-out 0s"; } function swa2(){ b.style.visibility = "hidden"; b.style.opacity = "0"; }

Делитесь с друзьями и задавайте вопросы, если что-то не получается при создание модального окна.

В очередной раз обращаюсь к теме создания модальных(всплывающих) окон. В последнее время меня все больше интересуют, различные техники исполнения всплывающих окон, без использования javascript, плагинов jQuery и т.д. Больший интерес вызывает возможность применения чистых стилей и неисчерпаемого потенциала новых функций .
Основываясь на разработках некоторых уважаемых буржуинов, они в этом плане ребята ушлые, получаются неплохие результаты, в плане создания модальных окон с помощью CSS3. Задача, в первую очередь состоит в том, чтобы добиться более-менее устойчивой кросбраузерности конечного результата, ну и конечно же, с наименьшими потерями, уменьшить общее количество кода, как в HTML так и в CSS, дабы облегчить жизнь многострадальным труженикам сайтостроения.
Что получается в итоге, у меня в этом плане на сегодняшний день, мы с вами и посмотрим, а заодно, и научимся делать всплывающие модальные окна с помощью «магии» CSS3.

Обновлено: 27.10.2017

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

Не стоит воспринимать данный урок, как руководство к действию, так как на этом этапе удалось добиться уверенной поддержки лишь современными браузерами (IE 9+, Firefox, Safari, Opera, Chrome ). С оглядкой на то, что древние версии браузера IE еще достаточно популярены среди пользователей, рекомендую рассматривать эту статью в виде некоего эксперимента, демонстрации возможностей CSS3.

Хорошо, теперь перейдем непосредственно к самой раскладке html кода и стилевого формирования нашего модального окна с помощью css3)))

Шаг 1. HTML

Во-первых, давайте создадим основную разметку HTML. Как вы можете видеть, базовая конструкция довольно простая, если рассматривать именно html-разметку модальных окон и кнопок(ссылок), для их активации. Каждое модальное окошко, представляет из себя ничто иное, как стандартный контейнер , с определенным содержание внутри и кнопкой «Закрыть», сформированной исключительно средствами css.

< a href= "#win1" class = "button button-green" > Открыть окно 1 < a href= "#win2" class = "button button-red" > Открыть окно 2 < a href= "#win3" class = "button button-blue" > Видео в окне 3 < a href= "#win4" class = "button button-orange" > Фото в окне 4 < a href= "#win5" >< img title= "" src= "img/realism_lrg.jpg" width= "150" height= "150" alt= "" /> < a href= "#x" class = "overlay" id= "win1" > < div class = "popup" > < a class = "close" title= "Закрыть" href= "#close" > < a href= "#x" class = "overlay" id= "win2" > < div class = "popup" > Здесь вы можете разместить любое содержание, текст с картинками или видео! < a class = "close" title= "Закрыть" href= "#close" > < a href= "#x" class = "overlay" id= "win3" > < div class = "popup" > < h2> Заголовок Здесь вставляете видео своё или с любого стороннего ресурса, YouTube, Vimeo и т. д. (iframe, embed) ... < a class = "close" title= "Закрыть" href= "page.html" onclick= "return false" > < a href= "#x" class = "overlay" id= "win4" > < div class = "popup" > < img class = "is-image" src= "ваша-картинка.jpg" alt= "" /> < a class = "close" title= "Закрыть" href= "#close" > < a href= "#x" class = "overlay" id= "win5" > < div class = "popup" > < img class = "is-image" src= "ваша-картинка.jpg" alt= "" /> < a class = "close" title= "Закрыть" href= "#close" >

Открыть окно 1 Открыть окно 2 Видео в окне 3 Фото в окне 4 Здесь вы можете разместить любое содержание, текст с картинками или видео! Заголовок Здесь вставляете видео своё или с любого стороннего ресурса, YouTube, Vimeo и т.д.(iframe, embed)...

В вышеприведенном примере кода, для наглядности, в контейнерах модальных окон прописал краткие пояснения. Вам остается по аналогии, в div-контейнер всплывающего окна, поместить любое свое содержание, будь то простой текст, картинки или видео с любого стороннего ресурса, YouTube, Vimeo и т.д. Ссылки на вызов модальных окон, можете сделать текстовыми, или же оформить их в виде , как в примере.

Шаг 2. CSS

Следующий шаг, это самое интересное, важно подготовить все необходимые стили, для нашего модального окошка, оформить внешний вид и добавить функционала. Базовые стили страницы я опустил, чтобы не вносить сумятицу, а некоторые правила, для большей ясности, разбавил комментариями:

/* Базовые стили слоя затемнения и модального окна */ . overlay { top: 0 ; right: 0 ; bottom: 0 ; left: 0 ; z- index: 10 ; display: none; /* фон затемнения */ background- color: rgba(0 , 0 , 0 , 0.65 ) ; position: fixed; /* фиксированное поцизионирование */ cursor: default ; /* тип курсара */ } /* активируем слой затемнения */ . overlay: target { display: block; } /* стили модального окна */ . popup { top: - 100 %; right: 0 ; left: 50 %; font- size: 14px; z- index: 20 ; margin: 0 ; width: 85 %; min- width: 320px; max- width: 600px; /* фиксированное позиционирование, окно стабильно при прокрутке */ position: fixed; padding: 15px; border: 1px solid #383838; background: #fefefe; /* скругление углов */ - webkit- border- radius: 4px; - moz- border- radius: 4px; - ms- border- radius: 4px; border- radius: 4px; font: 14px/ 18px "Tahoma" , Arial, sans- serif; /* внешняя тень */ - 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 ) ; - ms- 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. 6s ease- out; - moz- transition: - moz- transform 0. 6s ease- out; - o- transition: - o- transform 0. 6s ease- out; transition: transform 0. 6s ease- out; } /* активируем модальный блок */ . overlay: target+. popup { - webkit- transform: translate(- 50 %, 0 ) ; - ms- transform: translate(- 50 %, 0 ) ; - o- transform: translate(- 50 %, 0 ) ; transform: translate(- 50 %, 0 ) ; top: 20 %; } /* формируем кнопку закрытия */ . close { top: - 10px; right: - 10px; width: 20px; height: 20px; position: absolute; padding: 0 ; border: 2px solid #ccc; - webkit- border- radius: 15px; - moz- border- radius: 15px; - ms- border- radius: 15px; - o- border- radius: 15px; border- radius: 15px; background- color: rgba(61 , 61 , 61 , 0.8 ) ; - webkit- box- shadow: 0px 0px 10px #000; - moz- box- shadow: 0px 0px 10px #000; box- shadow: 0px 0px 10px #000; text- align: center; text- decoration: none; font: 13px/ 20px "Tahoma" , Arial, sans- serif; font- weight: bold; - webkit- transition: all ease . 8s; - moz- transition: all ease . 8s; - ms- transition: all ease . 8s; - o- transition: all ease . 8s; transition: all ease . 8s; } . close: before { color: rgba(255 , 255 , 255 , 0.9 ) ; content: "X" ; text- shadow: 0 - 1px rgba(0 , 0 , 0 , 0.9 ) ; font- size: 12px; } . close: hover { background- color: rgba(252 , 20 , 0 , 0.8 ) ; - webkit- transform: rotate(360deg) ; - moz- transform: rotate(360deg) ; - ms- transform: rotate(360deg) ; - o- transform: rotate(360deg) ; transform: rotate(360deg) ; } /* изображения внутри окна */ . popup img { width: 100 %; height: auto; } /* миниатюры слева/справа */ . pic- left, . pic- right { width: 25 %; height: auto; } . pic- left { float: left; margin: 5px 15px 5px 0 ; } . pic- right { float: right; margin: 5px 0 5px 15px; } /* элементы м-медиа, фреймы */ . popup embed, . popup iframe { top: 0 ; right: 0 ; bottom: 0 ; left: 0 ; display: block; margin: auto; min- width: 320px; max- width: 600px; width: 100 %; } . popup h2 { /* заголовок 2 */ margin: 0 ; color: #008000; padding: 5px 0px 10px; text- align: left; text- shadow: 1px 1px 3px #adadad; font- weight: 500 ; font- size: 1. 4em; font- family: "Tahoma" , Arial, sans- serif; line- height: 1.3 ; } /* параграфы */ . popup p { margin: 0 ; padding: 5px 0 }

/* Базовые стили слоя затемнения и модального окна */ .overlay { top: 0; right: 0; bottom: 0; left: 0; z-index: 10; display: none; /* фон затемнения */ background-color: rgba(0, 0, 0, 0.65); position: fixed; /* фиксированное поцизионирование */ cursor: default; /* тип курсара */ } /* активируем слой затемнения */ .overlay:target { display: block; } /* стили модального окна */ .popup { top: -100%; right: 0; left: 50%; font-size: 14px; z-index: 20; margin: 0; width: 85%; min-width: 320px; max-width: 600px; /* фиксированное позиционирование, окно стабильно при прокрутке */ position: fixed; padding: 15px; border: 1px solid #383838; background: #fefefe; /* скругление углов */ -webkit-border-radius: 4px; -moz-border-radius: 4px; -ms-border-radius: 4px; border-radius: 4px; font: 14px/18px "Tahoma", Arial, sans-serif; /* внешняя тень */ -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); -ms-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.6s ease-out; -moz-transition: -moz-transform 0.6s ease-out; -o-transition: -o-transform 0.6s ease-out; transition: transform 0.6s ease-out; } /* активируем модальный блок */ .overlay:target+.popup { -webkit-transform: translate(-50%, 0); -ms-transform: translate(-50%, 0); -o-transform: translate(-50%, 0); transform: translate(-50%, 0); top: 20%; } /* формируем кнопку закрытия */ .close { top: -10px; right: -10px; width: 20px; height: 20px; position: absolute; padding: 0; border: 2px solid #ccc; -webkit-border-radius: 15px; -moz-border-radius: 15px; -ms-border-radius: 15px; -o-border-radius: 15px; border-radius: 15px; background-color: rgba(61, 61, 61, 0.8); -webkit-box-shadow: 0px 0px 10px #000; -moz-box-shadow: 0px 0px 10px #000; box-shadow: 0px 0px 10px #000; text-align: center; text-decoration: none; font: 13px/20px "Tahoma", Arial, sans-serif; font-weight: bold; -webkit-transition: all ease .8s; -moz-transition: all ease .8s; -ms-transition: all ease .8s; -o-transition: all ease .8s; transition: all ease .8s; } .close:before { color: rgba(255, 255, 255, 0.9); content: "X"; text-shadow: 0 -1px rgba(0, 0, 0, 0.9); font-size: 12px; } .close:hover { background-color: rgba(252, 20, 0, 0.8); -webkit-transform: rotate(360deg); -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -o-transform: rotate(360deg); transform: rotate(360deg); } /* изображения внутри окна */ .popup img { width: 100%; height: auto; } /* миниатюры слева/справа */ .pic-left, .pic-right { width: 25%; height: auto; } .pic-left { float: left; margin: 5px 15px 5px 0; } .pic-right { float: right; margin: 5px 0 5px 15px; } /* элементы м-медиа, фреймы */ .popup embed, .popup iframe { top: 0; right: 0; bottom: 0; left: 0; display:block; margin: auto; min-width: 320px; max-width: 600px; width: 100%; } .popup h2 { /* заголовок 2 */ margin: 0; color: #008000; padding: 5px 0px 10px; text-align: left; text-shadow: 1px 1px 3px #adadad; font-weight: 500; font-size: 1.4em; font-family: "Tahoma", Arial, sans-serif; line-height: 1.3; } /* параграфы */ .popup p {margin: 0; padding: 5px 0}

Как видите, дорогие друзья, всё довольно таки просто и никакой лишней мешанины. Если всё проделаете правильно, то получите в свой арсенал инструментов, замечательное , в котором сможете разместить любой контент, будь то текстовое содержание, фотографии, различные формы регистрации и обратной связи, или же видеоролики из любого стороннего источника. Экспериментируйте с параметрами, видоизменяйте окно, как вашей душе угодно. По возможности, делитесь в комментариях своими наработками, или же возникшими вдруг проблемами.

А может и это вам будет интересно:Дополнения:

Часто, даже очень часто мне задают вопрос, как же правильно останавливать воспроизведение видео при закрытии мод. окна. При закрытии модального окна, проигрывание видеоролика в демо останавливается. В демо использовал событие onclick , для кнопки закрытия окна, указав в ссылке адрес демо-страницы, т.е. страницы, на которой расположено окно с видео:

Можно просто использовать ссылку с пустым атрибутом href="" , в обоих случаях происходит перезагрузка страницы и соответственно закрывается, и окно, и останавливается видео, костыль ещё тот конечно, но другого более действенного и валидного решения, без подключения javascript, на данный момент у меня нет.

< script type= "text/javascript" src= "http://www.youtube.com/player_api" >

С помощью API JavaScript, вы сможете управлять проигрывателем Chromeless Player и встроенным проигрывателем YouTube с помощью javaScript кода. Для нашего модального блока с встроенным видео, исполняемый js будет таким:

< script> var player; function onYouTubePlayerAPIReady() { player = new YT. Player("player" ) ; } $("#stop" ) . click(function () { player. stopVideo() } )

var player; function onYouTubePlayerAPIReady() { player = new YT.Player("player"); } $("#stop").click(function(){ player.stopVideo() })

При клике по кнопке с id="stop" будет вызвана функция , окно закроется и воспроизведение видео остановится.
Однако следует понимать, что для других видео-сервисов и танцы с бубнами будут другими))). Хотя всегда есть выбор — это использовать готовые специализированные плагины.

Веб-дизайнеры и предприниматели, которые живут в русскоговорящих странах, наверняка хотят иметь возможность пользоваться не только англоязычными шаблонами. Они также хотят иметь доступ к коллекциям русскоязычных готовых решений. Поэтому хотим обратить ваше внимание на новейший раздел , который теперь представлен на маркетплейсе TemplateMonster. Стоит упомянуть о том, что текст для каждого из шаблонов был написан вручную. К тому же, вам не нужно обладать какими-то сверхъестественными знаниями в сфере программирования, чтобы создать впечатляющий онлайн-проект.

С Уважением, Андрей