W3.CSS Modal
Модальное окно всегда отображается поверх текущей страницы.
Классы W3.CSS Modal
W3.CSS включает в себя следующие классы:
Класс | Определение |
w3-modal | Модальный контейнер |
w3-modal-content | Содержимое модального окна |
Создание модального окна
В качестве содержимого модального окна может быть использован любой HTML-элемент (блок div, header, абзац, изображение, и т.д.).
Пример:
<!-- Открытие модального окна -->
<button onclick="document.getElementById('id01').style.display='block'"
class="w3-btn">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-closebtn">×</span>
<p>Some text in the Modal..</p>
<p>Some text in the Modal..</p>
</div>
</div>
</div>
Посмотреть демо
Открытие модального окна
Чтобы открыть модальное окно на CSS, можно использовать любой HTML-элемент. Чаще всего это кнопка или ссылка. Добавьте атрибут onclick и укажите идентификатор модального окна (в нашем примере это id01), используя метод document.getElementById().
Закрытие модального окна
Чтобы закрыть модальное окно, добавьте класс w3-closebtn к элементу с атрибутом onclick, указывающим на идентификатор модального окна (id01). Также можно закрыть модальное окно, кликнув мышкой за его пределами (смотрите пример, приведенный ниже).
Совет: значок (;) представляет собой HTML-объект, который более предпочтителен для использования в качестве кнопки закрытия, чем буква «х».
Модальные шапка и подвал
Используйте классы 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-closebtn">×</span>
<h2>Modal Header</h2>
</header>
<div class="w3-container">
<p>Some text..</p>
<p>Some text..</p>
</div>
<footer class="w3-container w3-teal">
<p>Modal Footer</p>
</footer>
</div>
</div>
Посмотреть демо
Модальное окно как карточка
Чтобы отобразить модальное окно как карточку, добавьте класс w3-card- * к контейнеру w3-modal-content:
Пример: