В очередной раз обращаюсь к теме создания модальных(всплывающих) окон. В последнее время меня все больше интересуют, различные техники исполнения всплывающих окон, без использования javascript, плагинов jQuery и т.д. Больший интерес вызывает возможность применения чистых стилей и неисчерпаемого потенциала новых функций CSS3.
Основываясь на разработках некоторых уважаемых буржуинов, они в этом плане ребята ушлые, получаются неплохие результаты, в плане создания модальных окон с помощью CSS3. Задача, в первую очередь состоит в том, чтобы добиться более-менее устойчивой кросбраузерности конечного результата, ну и конечно же, с наименьшими потерями, уменьшить общее количество кода, как в HTML так и в CSS, дабы облегчить жизнь многострадальным труженикам сайтостроения.
Что получается в итоге, у меня в этом плане на сегодняшний день, мы с вами и посмотрим, а заодно, и научимся делать всплывающие модальные окна с помощью «магии» CSS3.
Обновлено: 27.10.2017
Для начала, все те кого заинтересовала эта тема, можете взглянуть на пример работы модальных окон в различных вариантах и скачать исходники:
Не стоит воспринимать данный урок, как руководство к действию, так как на этом этапе удалось добиться уверенной поддержки лишь современными браузерами ( IE 9+, Firefox, Safari, Opera, Chrome ). С оглядкой на то, что древние версии браузера IE еще достаточно популярены среди пользователей, рекомендую рассматривать эту статью в виде некоего эксперимента, демонстрации возможностей CSS3.
Шаг 1. HTML
Во-первых, давайте создадим основную разметку HTML. Как вы можете видеть, базовая конструкция довольно простая, если рассматривать именно html-разметку модальных окон и кнопок(ссылок), для их активации. Каждое модальное окошко, представляет из себя ничто иное, как стандартный контейнер <div>, с определенным содержание внутри и кнопкой «Закрыть», сформированной исключительно средствами css.
Далее приведу пример базовой html-разметки всплывающих окон и ссылок активации:
<!-- Ссылки на вызов модальных окон--> <a href="#win1" class="button button-green">Открыть окно 1</a> <a href="#win2" class="button button-red">Открыть окно 2</a> <a href="#win3" class="button button-blue">Видео в окне 3</a> <a href="#win4" class="button button-orange">Фото в окне 4</a> <!-- Вызов окна через миниатюру изображения --> <a href="#win5"><img title="" src="img/realism_lrg.jpg" width="150" height="150" alt="" /></a> <!-- Модальное окно №1 --> <a href="#x" class="overlay" id="win1"></a> <div class="popup"> Здесь вы можете разместить любое содержание, текст с картинками или видео! <a class="close"title="Закрыть" href="#close"></a> </div> <!-- Модальное окно №2 --> <a href="#x" class="overlay" id="win2"></a> <div class="popup"> Здесь вы можете разместить любое содержание, текст с картинками или видео! <a class="close" title="Закрыть" href="#close"></a> </div> <!-- Модальное окно №3 --> <a href="#x" class="overlay" id="win3"></a> <div class="popup"> <h2>Заголовок</h2> Здесь вставляете видео своё или с любого стороннего ресурса, YouTube, Vimeo и т.д.(iframe, embed)... <a class="close" title="Закрыть" href="page.html" onclick="return false"></a><!-- Выключение видео при закрытии окна --> </div> <!-- Модальное окно №4 --> <a href="#x" class="overlay" id="win4"></a> <div class="popup"> <img class="is-image" src="ваша-картинка.jpg" alt="" /> <a class="close" title="Закрыть" href="#close"></a> </div> <!-- Модальное окно №5 --> <a href="#x" class="overlay" id="win5"></a> <div class="popup"> <img class="is-image" src="ваша-картинка.jpg" alt="" /> <a class="close" title="Закрыть" href="#close"></a> </div> |
В вышеприведенном примере кода, для наглядности, в контейнерах модальных окон прописал краткие пояснения. Вам остается по аналогии, в 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} |
Как видите, дорогие друзья, всё довольно таки просто и никакой лишней мешанины. Если всё проделаете правильно, то получите в свой арсенал инструментов, замечательное модальное окно, в котором сможете разместить любой контент, будь то текстовое содержание, фотографии, различные формы регистрации и обратной связи, или же видеоролики из любого стороннего источника. Экспериментируйте с параметрами, видоизменяйте окно, как вашей душе угодно. По возможности, делитесь в комментариях своими наработками, или же возникшими вдруг проблемами.
А может и это вам будет интересно:
Дополнения:
Часто, даже очень часто мне задают вопрос, как же правильно останавливать воспроизведение видео при закрытии мод. окна. При закрытии модального окна, проигрывание видеоролика в демо останавливается. В демо использовал событие onclick, для кнопки закрытия окна, указав в ссылке адрес демо-страницы, т.е. страницы, на которой расположено окно с видео:
<a class="close" title="Закрыть" href="demo.html" onclick="demo.html(); return false;"></a>
Можно просто использовать ссылку с пустым атрибутом href="", в обоих случаях происходит перезагрузка страницы и соответственно закрывается, и окно, и останавливается видео, костыль ещё тот конечно, но другого более действенного и валидного решения, без подключения javascript, на данный момент у меня нет.
В обновлении к статье Модальный блок видео на CSS3 расписал способ остановки видео с подключением в работу jQuery и YouTube JavaScript Player API. Видимо стоит продублировать и здесь.
Метод отлично срабатывает для встроенного видео с YouTube. В первую очередь, вам понадобится подключить библиотеку jQuery (если таковая у вас отсутствует), например, с сервиса Google Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.4/jquery.min.js"></script> |
Затем подключаете YouTube JavaScript Player API:
<script type="text/javascript" src="http://www.youtube.com/player_api"></script> |
С помощью API JavaScript, вы сможете управлять проигрывателем Chromeless Player и встроенным проигрывателем YouTube с помощью javaScript кода. Для нашего модального блока с встроенным видео, исполняемый js будет таким:
<script> var player; function onYouTubePlayerAPIReady() { player = new YT.Player('player'); } $('#stop').click(function(){ player.stopVideo() }) </script> |
Далее, фрейму(iframe) с видео, необходимо присвоить идентификатор, пусть это будет id="player".
<iframe id="player" width="853" height="480" src="https://www.youtube.com/embed/1IrR7l9pGF0" frameborder="0" allowfullscreen=""></iframe> |
Кнопке закрытия модального окна, так же прописываем свой id:
<a href="#close" id="stop" title="Закрыть" class="close"></a> |
При клике по кнопке с id="stop" будет вызвана функция player.stopVideo (), окно закроется и воспроизведение видео остановится.
Однако следует понимать, что для других видео-сервисов и танцы с бубнами будут другими))). Хотя всегда есть выбор — это использовать готовые специализированные плагины.
Веб-дизайнеры и предприниматели, которые живут в русскоговорящих странах, наверняка хотят иметь возможность пользоваться не только англоязычными шаблонами. Они также хотят иметь доступ к коллекциям русскоязычных готовых решений. Поэтому хотим обратить ваше внимание на новейший раздел HTML шаблонов на русском языке, который теперь представлен на маркетплейсе TemplateMonster. Стоит упомянуть о том, что текст для каждого из шаблонов был написан вручную. К тому же, вам не нужно обладать какими-то сверхъестественными знаниями в сфере программирования, чтобы создать впечатляющий онлайн-проект.
Буду признателен, если поделитесь ссылкой на запись в своих соц-сетях:
Вот наконец вставился. Как правильно прописать две картинки?
<p style="text-align: justify;"><strong style="box-sizing: border-box; color: #333333; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; line-height: 20px;"><img src="../photos/text/zamovutu-poslugu-advokata.jpg" alt="" width="333" height="40" /> <img src="../photos/text/2.jpg" alt="" width="333" height="40" /></strong></p> <script type="text/javascript" src="../share42.js"></script>Вставился))) И что мне с ним делать? Что в конце концов вас интересует то? Вижу два файла изображения, за каким то лешим, обнесённые тегом
<strong>, вижу скрипт шары от димокса. Тупо не врублюсь никак, что вы хотите то и причем здесь модальное окно? Вы хотите чтобы одна картинка открывалась в модальном окне, по клику на другую или ЧЁ-о?Спасибо огромное!!Все прекрасно работает!
Рад, что у вас всё получилось.
Здарвствуйте, у меня такая проблема. Установил всплывающее окно, все работает. Как только подключаю язык jquery, всплывающее окно оккрывается а вот закрыть не получается, подскажите пожалуйста что делать?
Если быть точнее, то конкретно я подключаю скрипт jquery для плавной прокрутки, называется он ScrollTo.
Здравствуйте.
Даже представить не берусь, окна написаны на чистом CSS, js никак на них не должны влиять, если только не конфликтуют адрес ссылки закрытия
href="#close"и обработчик скролинга, так как в обоих случаях используется#, попробуйте для начала оставить якорь ссылки пустым(что не есть правильно, по ряду причин), так хотя бы выявите причину. Далее нужно будет уже прикручивать события js и т.д. а это уже другая история, легче модальное окошко на jQuery забабахать тогда))))$(function () {
$('a[href*=#]:not ([href=#])').click (function () {
if (location.pathname.replace (/^\//,'') == this.pathname.replace (/^\//,'') && location.hostname == this.hostname) {
var target = $(this.hash);
target = target.length ? target : $('[name=' + this.hash.slice(1) +']');
if (target.length) {
$('html,body').animate ({
scrollTop: target.offset ().top
}, 1000);
return false;
}
}
});
});
Нужно поставить :not ([href=#]), тогда будет всё отлично работать.
Спасибо за своевременное и оч. нужное дополнение))
При загрузке страницы видно div с инфой долюсекунды , если подключена Jquery то всё ок .
И как это вы только усмотрели ))). Хотелось бы посмотреть, да боюсь я не узрею. А по существу, всё логично, для скрытия мод. окошка используется связка
visibilityиopacity, от второго можно отказаться и посмотреть что получится в итоге. На каком этапе может быть задержка и как влияет подключение jQuery, для меня загадка, которую решать нет особой необходимости, потому как не критично, да и задержки могут происходить ведь исключительно на вашей стороне. Но все же спасибо, возьму на заметку и протестирую ещё раз по-полной.Аналогично «При загрузке страницы видно div с инфой долю секунды»
Просто уберите или уменьшите задержку перехода
transition: all ease .5s;и все! Да и хотелось бы чтобы вы уточнили в каком браузере наблюдается сея трабла))) буду разбиратьсяFF34, win8.1, буду пробовать
Подскажите, пожалуйста, как сделать всплывающее окно при первом посещении сайта. Спасибо.
Извините, уже нашел dbmast.ru/sozdaem-vsplyva...mnogo-javascript
Спасибо за статью!
Решил попробоватьЮ дабы разобраться с мехагизмом детально.
Работает, но на странице, где тестил, есть меню и оно при проходе мыши по popup окну просвечивает с возможностью клика.
Вопрос простой: почуму такой эффект и как избавиться от него?
Решил проблему: z-index...
Но есть ещё одна:
как передать текст в попап окно?
Понимаю, что вопрос «неуместен» м многие обычно посылают ... к документации. Но почему-то архи сложно понять принципы взаимодействия html и js, отсюда и вопрос.
У на так всегда, сначала задаём вопрос, потом сами же на него и находим ответ))
Второй вопрос что то не догоняю, в смысле: как передать текст в попап окно? Чаще всего это делается руками, в редакторе, а принципы работы js и html в один коммент сложно будет уложить)))
Ну руками это понятно.
Если по коду, то в DIV есть id="123456"
По DIV'у кликаем и надо в функцию на JS передать этот ID,
потому что DIV'ов много, а функция — одна и она должна знать, что и как обрабатывать. Для того, чтобы проверить, что приходит в функцию (и приходит ли вообще), хочу вывести полученный ID в POPUP-теле. Функцию увы не просмотреть отладчиком, точки останова там не выставляются. Давно бьюсь и всё бестолку...
Здравствуйте. Хочу установить кнопки, как у Вас на демо. Но они через HTML не идут. Как их через гаджет установить. Извините, но еще не умею с кодами работать. Подскажите.
Здравствуйте, Вячеслав.
Набор кнопок CSS3 смотрите и забираете здесь. В статье я подробно рассказываю, как их использовать. Относительно применения в шаблонах Blogger, всё по накатанной, набор правил css кнопок, вставляете в режиме редактирования шаблона, в раздел
<b:skin><![CDATA[ ... ]]></b:skin>, лучше всего перед тегом]]></b:skin>, чтоб не потеряться в дальнейшем, сохраняете изменения и всё, остается только в гаджете разместить ссылку с классом соответствующим той или иной кнопке, например, для зелёной кнопы:<a href="#" class="button button-green">Кнопка</a>В атрибуте
href="#"указываете нужный вам адрес, или если для вызова модального окна, идентификатор окошка. Всё!Спасибо большое. Доходчиво и понятно. Ну очень приятно что нашел Ваш сайт.Успехов.
Добрый день, мне понравилось демо версия, хотел бы сделать себе на сайт, но не знаю как проработать его в ОПЕНКАРТЕ?, подскажите пожалуйста...
у вас так:
<a href="#win1" class="button button-green">Открыть окно 1</a>как открыть из JavaScript?
Такой же вопрос: из какого javascript?