Модальні спливаючі вікна з допомогою CSS3 без Javascript

62

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

В черговий раз звертаюся до теми створення модальних(спливаючих вікон. Останнім часом мене все більше цікавлять, різні техніки виконання спливаючих вікон, без використання javascript, плагінів jQuery і т. д. Більший інтерес викликає можливість застосування чистих стилів і невичерпного потенціалу нових функцій CSS3.
Ґрунтуючись на розробках деяких шановних буржуїнів, вони в цьому плані хлопці спритні, виходять непогані результати, в плані створення модальних вікон з допомогою CSS3. Завдання, в першу чергу полягає в тому, щоб домогтися більш-менш стійкою кросбраузерности кінцевого результату, ну і звичайно ж, з найменшими втратами, зменшити загальну кількість коду, як у HTML, так і CSS, щоб полегшити життя багатостраждальним трудівникам сайтобудування.
Що виходить в результаті, у мене в цьому плані на сьогоднішній день, ми з вами подивимося, а заодно, і навчимося робити спливаючі модальні вікна за допомогою «магії» CSS3.

Оновлено: 03.01.2017

Модальное окно с помощью CSS3

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

Дивитися Демо

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

Добре, тепер перейдемо безпосередньо до самої розкладці html коду і стильового формування нашого модального вікна з css3 )))

Крок 1. HTML

По-перше, давайте створимо основну розмітку. Як ви можете бачити, базова конструкція досить проста, якщо розглядати саме html-розмітку модальних вікон і кнопок(посилань), для їх активації. Кожне модальне віконце, являє собою ніщо інше, як стандартний контейнер

з певним зміст всередині і кнопкою «Закрити», сформованою виключно засобами 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="images/realism_lrg.jpg" width="150" height="150" alt="" /></a>

<a href="#x" class="overlay" id="win1"></a>
<div class="popup">
Тут ви можете розмістити будь-який зміст, текст з картинками або відео!
<a class="close"title="Закрити" href="#close"></a>
</div>

<a href="#x" class="overlay" id="win2"></a>
<div class="popup">
Тут ви можете розмістити будь-який зміст, текст з картинками або відео!
<a class="close" title="Закрити" href="#close"></a>
</div>

<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>

<a href="#x" class="overlay" id="win4"></a>
<div class="popup">
<img class="is-image" src="ваша-картинка.јрд" alt="" />
<a class="close" title="Закрити" href="#close"></a>
</div>

<a href="#x" class="overlay" id="win5"></a>
<div class="popup">
<img class="is-image" src="ваша-картинка.јрд" alt="" />
<a class="close" title="Закрити" href="#close"></a>
</div>

Відкрити вікно 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: 15px 5px 5px 0;
}
.pic-right {
float: right;
margin: 5px 0 15px 5px;
}
/* елементи медіа, фрейми */
.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.6 s ease-out;
-moz-transition: -moz-transform 0.6 s ease-out;
-o-transition: -o-transform 0.6 s ease-out;
transition: transform 0.6 s 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: 15px 5px 5px 0;
}
.pic-right {
float: right;
margin: 5px 0 15px 5px;
}
/* елементи медіа, фрейми */
.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.4 em;
font-family: ‘Tahoma’, Arial, sans-serif;
line-height: 1.3;
}
/* параграфи */
.popup p {margin: 0; padding: 5px 0}

Як бачите, дорогі друзі, все досить таки просто і ніякої зайвої мішанини. Якщо все зробите правильно, то отримаєте у свій арсенал інструментів, чудове модальне вікно, в якому можна розмістити будь-який контент, будь то текстовий зміст, фотографії, різні форми реєстрації та зворотного зв’язку, або ж відеоролики з будь-якого стороннього джерела. Експериментуйте з параметрами, видозмінюйте вікно, як вашій душі завгодно. По можливості, діліться в коментарях своїми напрацюваннями, або ж виникли раптом проблемами.

За основу були взяті матеріали з різних буржуїнських джерел, безжально перелопачены, перероблені і зібрані в більш-менш струнку конструкцію, всі мануали по темі і не пригадаю, так що ……

Завантажити Вихідні Коди

Висновок:

Часто, навіть дуже часто мені задають питання, як же правильно зупиняти відтворення відео при закритті мод. вікна. При закритті модального вікна, програвання відеоролика в демо зупиняється. У демо використовував подія onclick для кнопки закриття вікна, вказавши в посиланні адреса демо-сторінки, тобто сторінки, на якій розташоване вікно з відео:

Можна просто використовувати посилання з порожнім атрибутом 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">

Потім підключаєте YouTube JavaScript Player API:

<script type="text/javascript" src="http://www.youtube.com/player_api">

З допомогою JavaScript API, ви зможете управляти програвачем 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()
})

Далі, кадру(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 (), вікно закриється і відтворення відео зупиниться.
Проте слід розуміти, що для інших відео-сервісів і танці з бубнами будуть іншими))). Хоча завжди є вибір — це використовувати готові спеціалізовані плагіни.

З Повагою, Андрій .

Буду вдячний, якщо поділитеся посиланням на запис в своїх соціальних мережах: