Модальные всплывающие окна с помощью CSS3 без Javascript
В очередной раз обращаюсь к теме создания модальных(всплывающих) окон. В последнее время меня все больше интересуют, различные техники исполнения всплывающих окон, без использования javascript, плагинов jQuery и т.д. Больший интерес вызывает возможность применения чистых стилей и неисчерпаемого потенциала новых функций CSS3.
Основываясь на разработках некоторых уважаемых буржуинов, они в этом плане ребята ушлые, получаются неплохие результаты, в плане создания модальных окон с помощью CSS3. Задача, в первую очередь состоит в том, чтобы добиться более-менее устойчивой кросбраузерности конечного результата, ну и конечно же, с наименьшими потерями, уменьшить общее количество кода, как в HTML так и в CSS, дабы облегчить жизнь многострадальным труженикам сайтостроения.
Что получается в итоге, у меня в этом плане на сегодняшний день, мы с вами и посмотрим, а заодно, и научимся делать всплывающие модальные окна с помощью «магии» CSS3.
Для начала, все те кого заинтересовала эта тема, можете взглянуть на пример работы модальных окон в различных вариантах и скачать исходники:
Не стоит воспринимать данный урок, как руководство к действию, так как на этом этапе удалось добиться уверенной поддержки лишь современными браузерами ( 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: 1;
visibility: hidden;
/* фон затемнения */
background-color: rgba(0, 0, 0, 0.7);
opacity: 0;
position: fixed; /* фиксированное поцизионирование */
cursor: default; /* тип курсара */
-webkit-transition: opacity .5s;
-moz-transition: opacity .5s;
-ms-transition: opacity .5s;
-o-transition: opacity .5s;
transition: opacity .5s;
}
.overlay:target {
visibility: visible;
opacity: 1;
}
.is-image {
top: 0;
right: 0;
bottom: 0;
left: 0;
display:block;
margin: auto;
width: 100%;
height: auto;
/* скругление углов встроенных картинок */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
}
/* встроенные элементы м-медиа, фреймы */
embed, iframe {
top: 0;
right: 0;
bottom: 0;
left: 0;
display:block;
margin: auto;
min-width: 320px;
max-width: 600px;
width: 100%;
}
.popup h1 { /* заголовок 1 */
color: #008000;
text-align: left;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
font:24px 'Trebuchet MS', Helvetica, sans-serif;
font-weight: bold;
}
.popup h2 { /* заголовок 2 */
color: #008000;
text-align: left;
text-shadow: 0 1px 3px rgba(0,0,0,.3);
font:22px 'Trebuchet MS', Helvetica, sans-serif;
}
/*** Формируем стили модального окна ***/
.popup {
top: 0;
right: 0;
left: 0;
font-size: 14px;
z-index: 10;
display: block;
visibility: hidden;
margin: 0 auto;
width: 90%;
min-width: 320px;
max-width: 600px;
/* фиксированное позиционирование, окно стабильно при прокрутке */
position: fixed;
padding: 15px;
border: 1px solid #383838;
/* скругление углов */
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
-ms-border-radius: 4px;
border-radius: 4px;
background-color: #FFFFFF;
/* внешняя тень блока */
-webkit-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-moz-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-ms-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
-o-box-shadow: 0 0 6px rgba(0, 0, 0, 0.8);
box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.8);
/* полная прозрачность окна, появление при клике */
opacity: 0;
/* эффект перехода (появление) */
-webkit-transition: all ease .5s;
-moz-transition: all ease .5s;
-ms-transition: all ease .5s;
-o-transition: all ease .5s;
transition: all ease .5s;
}
/* активируем появление окна и затемнение фона */
.overlay:target+.popup {
top: 20%; /* положение окна от верха страницы при появлении */
visibility: visible;
opacity: 1; /* убираем прозрачность */
}
/* формируем кнопку закрытия */
.close {
position: absolute;
top: -10px;
right: -10px;padding: 0;
width: 20px;
height: 20px;
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-weight: bold;
line-height: 20px;
/* задаём значения и эффект перехода при наведении */
-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 p, .popup div {
margin-bottom: 10px;
}Как видите, дорогие друзья, все довольно таки просто и никакой лишней мешанины. Если все проделаете правильно, то получите в свой арсенал, замечательное модальное всплывающее окно, в котором сможете разместить любой контент, будь то текстовое содержание, фотографии, различные формы регистрации и обратной связи, или же видео из любого стороннего источника. Экспериментируйте с параметрами, видоизменяйте окно, как вашей душе угодно, и по возможности делитесь своими наработками, а так же возникшими вдруг проблемами, в комментариях.
За основу были взяты материалы с различных буржуинских источников, безжалостно перелопачены, переработаны и собраны в более-менее стройную конструкцию, все мануалы по теме и не упомню, так что ……
