Простое всплывающее окно. Создаем модальное окно на HTML5 и CSS3. Интеграция контактной формы в модальное окно

В очередной раз обращаюсь к теме создания модальных(всплывающих) окон. В последнее время меня все больше интересуют, различные техники исполнения всплывающих окон, без использования 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. Стоит упомянуть о том, что текст для каждого из шаблонов был написан вручную. К тому же, вам не нужно обладать какими-то сверхъестественными знаниями в сфере программирования, чтобы создать впечатляющий онлайн-проект.

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

В статье о создание модального окна на css мы разобрали что такое модальное окно и зачем оно нужно. А так же создали окно используя только css. В этой статье я опишу как создать модальное окно javascript. А конкретнее мы будем для создания использовать библиотеку jquery.

И так начнём создавать модальное окно на jquery. Для усложнения задачи поставим такое условие. Нам нужно будет создать адаптивное модальное окно. А адаптивность будет заключаться в том, что окно при уменьшении размера экрана то же будет уменьшаться. Адаптивное модальное окно jquery начнём создавать с html разметки.

Жми здесь! X Заказать звонок

С кодом я думаю всё понятно. Имеем оболочку.wraper, где находится контент нашего сайта. Есть кнопка вызова модального окна с идентификаторм gowindow, само окно с ид modal_window и перекрывающий слой myoverlay. Напишем теперь css стили.

Wraper { width: 100%; margin: auto; width: auto;/*то же что и 100%*/ max-width: 960px;/*максимальная ширина обёртки*/ border: 1px solid #000; background-color: #F5F9FB; } .button{ /*-------*/ } #modal_window { width: 34%;/*для адаптивности*/ height: 300px; border-radius: 10px; border: 3px #fff solid; background: #e0e0e0; margin-top: -30%; margin-left: 33%; display: none; opacity: 0; /*полная прозрачность для анимации */ z-index: 5000; /*окно должно быть верхним слоем*/ padding-top: 20px; text-align: center; position: relative; } #modal_window #window_close { width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block; } #myoverlay { z-index: 3000; /*выше всех слоёв но ниже окна */ position: fixed; /*для перекрытия сайта*/ background-color: #000; opacity: 0.5; width: 100%; height: 100%; /*полностью на экран */ top: 0; left: 0; cursor: pointer; display: none; }

Опишем css код. Блок.wraper задаём адаптивным, он меняется от размера экрана но не более 960px. Код кнопки показывать не буду. Ширину окна #modal_window задаём в процентах, ширина будет зависеть от ширины.wraper. Для центровки окна задаём марджин 33%. Он расчитывается так 50%-17%, где 17% половина ширины окна. Скрываем окно свойствами display: none и opacity: 0. С кодом #window_close и #myoverlay я думаю всё ясно. Давайте теперь напишем код для jquery. Будем считать что jqery уже подключена.

$(document).ready(function() { $("#gowindow").click(function(){//клик по кнопке $("#myoverlay").fadeIn(400, //показываем перекрывающий слой function(){ $("#modal_window") .css("display", "block") //делаем окно видимым.animate({opacity: 1, top: "50%"}, 200); //увеличиваем прозрачность, окно плавно съезжает }); }); /* убираем окно */ $("#window_close, #myoverlay").click(function(){ //нажатие по перекрывающему слою или кресту $("#modal_window") .animate({opacity: 0, top: "45%"}, 200, //вкл прозрачность, окно идёт вверх function(){ $(this).css("display", "none"); //делаем окно невидимым $("#myoverlay").fadeOut(400); //убираем слой перекрытие }); }); });

Js код я думаю в объяснении не нуждается, так как я его достаточно хорошо прокомментировал. На этом я думаю всё, так что подведём итоги. Мы сделали простое адаптивное модальное окно jquery

Модальное окно - это контейнер, который при нажатии ссылки всплывает и предоставляет какую-либо информацию. Думаю многие уже знакомы с ним, ну если же нет посмотрите демо версию, чтобы понять что это такое. Сейчас их насчитывается огромное множество и каждый работает по своему. Например, есть совершенно стандартные , которые запрашивают выполнить какое то действие, в данном примере подтверждения. Или например, другой вариант, при первом заходе на сайт, которое актуально будет подходить под различные подписки на группы в социальных сетях. Есть модальные окна на чистом 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; }

Всем огромное спасибо за Ваше внимание!

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

1. Модальные окна с помощью CSS3 без Javascript

Самый популярный, среди читателей моего блога, метод создания модальных окон. Очень прост в реализации. Формирование внешнего вида всплывающих блоков и весь функционал основаны исключительно на CSS3, без подключения в работу Javascript и дополнительных графических элементов.
Возможность подключения и вывода модальных окон практически на любом сайте. Достаточно правильно разместить html-каркас в нужном месте, добавить нужный вам контент, подключить стили, привязать всё это дело к активирующей кнопке или любому другому элементу сайта(картинки, пункты меню, ссылки, отдельное слово в тексте и т.д.) и всё, готово к работе.

2. Модальное окно с помощью CSS и

Очень простой, лёгкий плагин jQuery, с помощью которого вы сможете быстро и без проблем реализовать у себя на сайте вывод модальных модальных окон с любой информацией, будь то простой текст, картинки, различный формы или встроенное видео.
Внешний вид формируется с помощью CSS, размер окна задается непосредственно в ссылке, в атрибуте href="#?w=500" , где #?w=500 указывает необходимую ширину окна. Впрочем, изучив детали урока, всё станет предельно ясно. Для работы данного решения необходима подключённая к сайту библиотека jQuery.

3. Адаптивное модальное окно строго по центру

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

4. Модальное окно на HTML5, CSS3 и скрытых чекбоксах

Довольно свежая метода для реализации всплывающих(модальных) окошек. Скрытые чекбоксы я чаще использовал для создания раскрывающихся информационных блоков или « ». В результате оказалось всё очень даже просто, с помощью CSS3 и синтаксических особенностей HTML5 можно легко организовать работу модальных окон. На оформлении особо не зацикливался(вся суть не в этом), за исходную взял пример инфо-блоков Bootstrap. Способ отлично срабатывает во всех современных браузерах, пользователи застрявшие на замшелых версиях IE-шки, к сожалению пролетают мимо.

5. Модальный блок видео на CSS3

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

Меня часто спрашивали, можно ли встроить внутрь модального окна, какой-нибудь слайдер, не только для картинок, но и для текста. Почему бы и нет. У буржуинов нашелся простенький, подходящий по всем параметрам ротатор контента, оставалось объединить его с уже готовым модальным окном. И в итоге получилось то, что получилось:)). Посмотрите, всё довольно просто в исполнении.

7. Интеграция контактной формы в модальное окно

На многих сайтах используются всплывающие формы обратной связи, формы регистрации и входа. Проще всего встроить рабочую форму в готовое модальное окно. Берётся вполне себе приличная форма, свёрстанная на CSS3, любой вариант модального окна представленный выше, остаётся лишь оба эти элемента объединить в единый механизм. Как это сделать? Именно об этом, подробно расписано в представленном уроке.

Отличная возможность для ваших пользователей отправлять сообщения с любой страницы, или отдельной записи сайта (блога) — это отдельная, модальная форма контактов. Правильно прикручиваете к форме php-обработчик, размещаете в тело нужной вам страницы и всё, остаётся только периодически проверять свой почтовый ящик. Данный метод корректно работает во всех современных браузерах: Chrome, Firefox, Opera, Safari, так же в Internet Explorer, начиная с 9-й версии. Сама форма наделена функциями модального окна с помощью магии CSS3.

Лайтбокс своего рода то же модальное окно, вернее принцип работы практически тот же, правда используется по большей части для просмотра увеличенных или полно-размерных изображений. В своё время решил заделать более-менее адаптивную версию Lightbox, исключительно средствами CSS3. Что из этого получилось сможете узнать посмотрев пример и если тема вставит, изучите и урок. Пользователи плотно подсевшие на IE 8 и ниже, к сожалению ничего не увидят, метод основан на использовании псевдокласса:target .

10. Всплывающая контактная форма для сайта

Интересное (на мой взгляд) решение создания отдельной, оригинально оформленной, всплывающей формы контактов для сайта. Работа формы основана на обработке события onclick . Оформление с помощью оригинального изображения в виде почтового конверта. Работает форма быстро и корректно во всех браузерах, так что вполне достойный образец средств взаимодействия с пользователями.

11. Всплывающее окно при загрузке сайта с помощью CSS3 и немного javascript

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

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

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

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

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

Посмотреть пример модального окна можно с помощью JavaScript, воспользовавшись методом alert() .

Всплывающее окно

Первым шагом создания всплывающего окна является создание элемента (или любого другого элемента) и его оформление:

Название документа .okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; } Всплывающее окошко! Попробовать »

Этот и будет использоваться в качестве всплывающего окна. Теперь мы его скрываем с помощью значения none свойства display и добавляем ссылку, при нажатии на которую будет появляться всплывающее окно:

Название документа #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; display: none; } #okno:target {display: block;} Всплывающее окошко! Вызвать всплывающее окно Попробовать »

Используя псевдо-класс:target мы выбираем и применяем стили к элементу, к которому был осуществлён переход. Таким образом после перехода по ссылки значение свойства display элемента сменится с none на block .

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

#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; и перенаправляем нашу ссылку на него:

Название документа #main { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; } #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; } #main:target {display: block;} Всплывающее окошко! Вызвать всплывающее окно Попробовать »

У элемента убираем display: none; (он больше не нужен, так как скрываем мы теперь ). В итоге родительский выполняет теперь скрытие всплывающего окна, перенаправляя выбор на страницу.

На этом создание простого всплывающего окна закончено.

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

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

Название документа #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; } #okno:target {display: block;} Всплывающее окошко! Вызвать всплывающее окно

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

Название документа #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; } #okno:target {display: block;} .close { display: inline-block; border: 1px solid #0000cc; color: #0000cc; padding: 0 12px; margin: 10px; text-decoration: none; background: #f2f2f2; font-size: 14pt; cursor:pointer; } .close:hover {background: #e6e6ff;} Всплывающее окошко!
Закрыть окно Вызвать всплывающее окно Попробовать »

Для эффекта затемнения страницы при выводе модального окна, надо поместить весь имеющийся код окна в дополнительный :

Всплывающее окошко!
Закрыть окно

Позиционируем родительский и растягиваем его на всю ширину и высоту окна. Задаём ему display: none; и перенаправляем ссылку вызова окна на него.

У дочернего убираем display: none; (он больше не нужен, так как родительский будет скрывать всё, что находится внутри него). В итоге родительский теперь отвечает за отображение модального окна и за затемнение фона страницы, а дочерний только за оформление самого окна:

Название документа #zatemnenie { background: rgba(102, 102, 102, 0.5); width: 100%; height: 100%; position: absolute; top: 0; left: 0; display: none; } #okno { width: 300px; height: 50px; text-align: center; padding: 15px; border: 3px solid #0000cc; border-radius: 10px; color: #0000cc; position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; background: #fff; } #zatemnenie:target {display: block;} .close { display: inline-block; border: 1px solid #0000cc; color: #0000cc; padding: 0 12px; margin: 10px; text-decoration: none; background: #f2f2f2; font-size: 14pt; cursor:pointer; } .close:hover {background: #e6e6ff;} Всплывающее окошко!
Закрыть окно Вызвать всплывающее окно Попробовать »

Примечание: если вам нужно, чтобы при заходе на страницу пользователь сразу видел всплывающее окно (а не вызывал его по ссылке), то адрес страницы надо будет прописывать вместе с id окна (например адрес может выглядеть так: site.ru/papka/documet.html#okno).