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

css-modal-wind

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

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

 

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

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

Хорошо, теперь перейдем непосредственно к самой раскладке html кода и стилевого формирования нашего модального окна с помощью 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;
}

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

Скачать Исходники

За основу были взяты материалы с сайта: dbmast.ru

2 комментария
  1. Решение хорошее, но есть одна проблема…..при клике за пределами модального окна оно исчезает, но остается звук……Есть ли решение?

  2. Решение хорошее, но есть одна проблема…..при клике за пределами модального окна оно пропадает, но звук остается…….Решение?

Отставить отзыв

Ваш e-mail не будет опубликован. Обязательные поля помечены *