W3.CSS Модал
Що таке модал?
Модал — це діалогове/спливаюче вікно, яке відображається поверх поточної сторінки:
W3.CSS Класи модалу
W3.CSS надає наступні класи для модальних вікон:
| Клас | Визначає |
|---|---|
| w3-modal | Модальний контейнер |
| w3-modal-content | Модальний зміст |
Створити модал
Клас w3-modal визначає контейнер для модалу.
Клас w3-modal-content визначає модальний вміст.
Модальним вмістом може бути будь-який елемент HTML (div, заголовки, параграфи, зображення тощо).
Приклад
<!-- Тригер/Відкрити модал -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-button">Open Modal</button>
<!-- Модал -->
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<div class="w3-container">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<p>Якийсь текст в модалі..</p>
<p>Якийсь текст в модалі..</p>
</div>
</div>
</div>
Спробуйте самі »
Відкрити Modal
Використовуйте будь-який елемент HTML, щоб відкрити модал. Однак часто це кнопка або посилання.
Додайте атрибут onclick і вкажіть ідентифікатор модального елемента (id01 у нашому прикладі), використовуючи метод document.getElementById().
Закрити модал
Щоб закрити модальний елемент, додайте клас w3-button до елемента разом з атрибутом onclick, який вказує на ідентифікатор модального елемента (id01). Ви також можете закрити його, клацнувши за межами модального вікна (див. приклад нижче).
Порада: × є кращою сутністю HTML для піктограм закриття, а не літери "x".
Модальний верхній і нижній колонтитули
Використовуйте класи w3-container для створення різних розділів усередині модального вмісту:
Приклад
<div id="id01" class="w3-modal">
<div class="w3-modal-content">
<header class="w3-container w3-teal">
<span onclick="document.getElementById('id01').style.display='none'"
class="w3-button w3-display-topright">×</span>
<h2>Заголовок модалу</h2>
</header>
<div class="w3-container">
<p>Якийсь текст..</p>
<p>Якийсь текст..</p>
</div>
<footer class="w3-container w3-teal">
<p>Нижній колонтитул модалу</p>
</footer>
</div>
</div>
Спробуйте самі »
Модал як картка
Щоб відобразити модал як картку, додайте один із класів w3-card-* до контейнера w3-modal-content:
Анімовані модали
Використовуйте будь-який із класів w3-animate-zoom|top|bottom|right|left, щоб ковзати в модалі з певного напрямку:
Приклад
<div class="w3-modal-content w3-animate-zoom">
<div class="w3-modal-content w3-animate-top">
<div class="w3-modal-content w3-animate-bottom">
<div class="w3-modal-content w3-animate-left">
<div class="w3-modal-content w3-animate-right">
<div class="w3-modal-content w3-animate-opacity">
Спробуйте самі »
Ви також можете зменшити фоновий колір модального елемента, встановивши клас w3-animate-opacity для елемента w3-modal:
Модальне зображення
Натисніть зображення, щоб відобразити його як модальне, у повному розмірі:
Приклад
<img src="img_snowtops.jpg" onclick="document.getElementById('modal01').style.display='block'" class="w3-hover-opacity">
<div id="modal01" class="w3-modal w3-animate-zoom" onclick="this.style.display='none'">
<img class="w3-modal-content" src="img_snowtops.jpg">
</div>
Спробуйте самі »
Модальна галерея зображень
Натисніть зображення, щоб відобразити його в повному розмірі:
Приклад
<div class="w3-row-padding">
<div class="w3-container w3-third">
<img src="img_snowtops.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img src="img_lights.jpg" style="width:100%" onclick="onClick(this)">
</div>
<div class="w3-container w3-third">
<img src="img_mountains.jpg" style="width:100%" onclick="onClick(this)">
</div>
</div>
<div id="modal01" class="w3-modal" onclick="this.style.display='none'">
<img class="w3-modal-content" id="img01" style="width:100%">
</div>
<script>
function onClick(element) {
document.getElementById("img01").src = element.src;
document.getElementById("modal01").style.display = "block";
}
</script>
Спробуйте самі »
Модальна форма входу
Цей приклад створює модал для входу:
Модал із вкладеним вмістом
У цьому прикладі створюється модал із вмістом із вкладками:
Закрийте Modal
У наведених вище прикладах ми використовуємо кнопку, щоб закрити модальне вікно. Однак, маючи трохи JavaScript, ви також можете закрити модальне вікно, клацнувши за межами модального поля:
Приклад
// Отримати модал
var modal = document.getElementById('id01');
// Коли користувач клацає будь-де за межами модала, закрити його
window.onclick = function(event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
Спробуйте самі »
Додатково: лайтбокс (модальна галерея зображень)
У цьому прикладі показано, як додати слайд-шоу зображення в модал, щоб створити "лайтбокс":
Підказка: Щоб дізнатися більше про слайд-шоу, відвідайте розділ W3.CSS Слайд-шоу на нашому сайті W3Schools українською.
