В очередной раз обращаюсь к теме создания модальных(всплывающих) окон. В последнее время меня все больше интересуют, различные техники исполнения всплывающих окон, без использования 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 и т.д. Ссылки на вызов модальных окон, можете сделать текстовыми, или же оформить их в виде , как в примере.
Следующий шаг, это самое интересное, важно подготовить все необходимые стили, для нашего модального окошка, оформить внешний вид и добавить функционала. Базовые стили страницы я опустил, чтобы не вносить сумятицу, а некоторые правила, для большей ясности, разбавил комментариями:
| /* Базовые стили слоя затемнения и модального окна */ . 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 , ну мне хотелось бы отвести эту долю 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. Особенность данного примера в том, что тут не требуется , ну за исключением самой библиотеки JQuery.
Размещаем код модального окна на странице:
закрыть Открыть модальное окно
Как видно из разметки, блок самого модального окна это div c атрибутом id=modal_form , который содержит элемент span c id=modal_close . Этот элемент будет служить кнопкой для закрытия модального окна, кроме того, ниже блока расположен блок div с атрибутом id=overlay , который служит одновременно и для затемнения фона. Модальное окно будет открываться по ссылке, с классом modal .
CSS для модального окна
#modal_form { width: 300px; height: 300px; border-radius: 5px; border: 3px #000 solid; background: #fff; position: fixed; top: 45%; left: 50%; margin-top: -150px; margin-left: -150px; display: none; opacity: 0; z-index: 5; padding: 20px 10px; } #modal_form #modal_close { width: 21px; height: 21px; position: absolute; top: 10px; right: 10px; cursor: pointer; display: block; } #overlay { z-index:3; position:fixed; background-color:#000; opacity:0.8; -moz-opacity:0.8; filter:alpha(opacity=80); width:100%; height:100%; top:0; left:0; cursor:pointer; display:none; }
Для modal_form мы задали фиксированную ширину и высоту, а затем отцентрировали положение по центру экрана. Для подложки модального окна (overlay ) мы задаем размер по ширине экрана, заливку с прозрачностью, а так же прячем её по умолчанию. Особый момент с z-index , у модального окна он должен быть наибольшим из всех элементов на странице, а у обложки должен быть больше всех элементов, кроме самого модального окна.
Теперь к самому основному, это код на javascript. Для модального окна будет использоваться два основных события, это его открытие — клик по элементу с классом modal , в нашем случае это ссылка, и закрытие модального окна, это клик по обложке (overlay ), либо клик на кнопку закрыть, в нашем случае это элемент span с id=modal_close .
$(document).ready(function() { $(".modal").click(function(event){ event.preventDefault(); $("#overlay").fadeIn(400, // анимируем показ обложки function(){ // далее показываем мод. окно $("#modal_form") .css("display", "block") .animate({opacity: 1, top: "50%"}, 200); }); }); // закрытие модального окна $("#modal_close, #overlay").click(function(){ $("#modal_form") .animate({opacity: 0, top: "45%"}, 200, // уменьшаем прозрачность function(){ // пoсле aнимaции $(this).css("display", "none"); // скрываем окно $("#overlay").fadeOut(400); // скрывaем пoдлoжку }); }); });
Посредством animate мы меняем позицию по вертикали top , а так же прозрачность opacity , и с помощью этого получаем интересный эффект. Подобный эффект используется как при открытии окна, так и при его закрытии. Отличие в том, что меняется порядок применения свойств для блоков, тем самым визуализируя открытие и закрытие окна.
3. Пример модального окна jQuery, вызванного по ссылке (с Демо)
Скорее всего Вы уже не раз видели в интернете всплывающее модальное окно - подтверждение регистрации, предупреждение, справочная информация, загрузка файла и многое другое. В этом уроке я предложу несколько примеров по созданию самых простых модальных окон.
Создаём простое всплывающее модальное окно Приступим к рассмотрению кода простейшего модального окна, которое будет сразу появлятьсяjQuery код
$(document).ready(function()
{
alert("Текст во всплывающем окне");
});
Код вставляете в любое место в body
Вашей страницы. Сразу после загрузки страницы, без каких-либо команд, Вы увидите окно следующего вида:
А вот следующий код будет выполняться после загрузки всей страницы в браузер. В нашем примере после загрузки страницы с изображениями выскочит простое всплывающие окошко:
$(window).load(function()
{
alert("Загрузка страницы завершена!)");
});
Часто можете видеть, что форма входа и регистрации находятся именно в таких окнах. Приступим к делу
Для начала напишем html-часть . Этот код размещаем в body Вашего документа.
Вызов модального окна
Текст модального окна
Закрыть
Текст в модальном окне.
Код CSS . Либо в отдельном css-файле, либо в в head.
body {
font-family:verdana;
font-size:15px;
}
.link {color:#fff; text-decoration:none}
.link:hover {color:#fff; text-decoration:underline}
#mask {
position:absolute;
left:0;
top:0;
z-index:9000;
background-color:#000;
display:none;
}
#boxes .window {
position:absolute;
left:0;
top:0px;
-top: 40px;
width:440px;
height:200px;
display:none;
z-index:9999;
padding: 20px;
overflow: hidden;
}
#boxes #dialog {
width:375px;
height:203px;
padding:10px;
background-color:#ffffff;
}
.top {
position:absolute;
left:0;
top:0;
width:370px;
height:30px;
background: #0085cc;
padding: 8px 20px 6px 10px;
}
.close {
float:right;
}
.content {
padding-top: 35px;
}
В коде jQuery основное внимание уделим позиции модального окна и маске, в нашем случае постепенному затемнению фона.
Внимание! Не забываем подключить библиотеку в head документа!
Подключение библиотеки с сайта Google. Ну и непосредственно сам код jQuery.
Код jQuery
$(document).ready(function() {
$("a").click(function(e) {
e.preventDefault();
var id = $(this).attr("href");
var maskHeight = $(document).height();
var maskWidth = $(window).width();
$("#mask").css({"width":maskWidth,"height":maskHeight});
$("#mask").fadeIn(1000);
$("#mask").fadeTo("slow",0.8);
var winH = $(window).height();
var winW = $(window).width();
$(id).css("top", winH/2-$(id).height()/2);
$(id).css("left", winW/2-$(id).width()/2);
$(id).fadeIn(2000);
});
$(".window .close").click(function (e) {
e.preventDefault();
$("#mask, .window").hide();
});
$("#mask").click(function () {
$(this).hide();
$(".window").hide();
});
});
В данном уроке мы научися создавать модальное окно с помощью HTML5 и CSS3. В уроке мы не будем использовать JS, только полностью CSS3. Модальные окна можно использовать для формы обратной связи, для фото и видео и еще есть множество вариантов его применения.
Начинаем делать наше модальное окно.
Шаг 1. Разметка HTML
Первым делом нам нужно сделать HTML-разметку, т.е. сделать ссылку по которой будет открываться окно, и сделать каркас нашего окна. Для этого пишем вот такой код:
Шаг 2. Содержимое модального окна
Теперь добавим само содержимое нашего окна. Сделаем заголовок и небольшой текст и поместим это все в тег и вставим в код вместо многоточия . Еще нужно вставить ссылку, по которой будет закрываться наше окно и придать ей class="close" . Вот так должен выглядеть ваш код:
ПРОЕКТ REDSTARREDSTAR - проект посвященный вопросам, которые Вас так давно интересовали. На данном проекте размещены бесплатные уроки и статьи по различным темам. Темы очень разнообразны, начиная от простой установки 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;}
Ну теперь наша кнопка выглядет так, как и задумывалось. У вас она должна выглядеть также:
На этом данный урок закончен. Спасибо за внимание! Для вашего удобства я добавил демо-версию и исходные файлы. Если, что то не понятно, то скачайте исходные файлы.
