W3.CSS Модальные окна (Модалы)
Модальное окно (модал) - это диалоговое окно / всплывающее окно, которое отображается в верхней части текущей страницы:
W3.CSS Классы модального окна (модала)
W3.CSS предоставляет следующие классы для модальных окон:
| Класс | Определяет |
|---|---|
| w3-modal | Модальный контейнер |
| w3-modal-content | Модальный контент |
Создать модальное окно (модал)
Класс w3-modal определяет контейнер для модального окна.
Класс w3-modal-content определяет модальный контент.
Модальным контентом может быть любой элемент HTML (элементы div, заголовки, абзацы, изображения и т.д.).
Пример
<!-- Trigger/Open the Modal -->
<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>
Попробуйте сами »
Открыть модальное окно
Можно использовать любой HTML элемент для открытия модального окна. Но обычно это кнопка или ссылка.
Добавьте атрибут onclick и укажите идентификатор модального окна (в нашем примере id01 ), используя метод document.getElementById().
Закрыть модальное окно
Чтобы закрыть модальное окно, добавьте класс w3-button к элементу вместе с атрибутом onclick, который указывает на идентификатор модального элемента (id01). Вы также можете закрыть его, нажав за пределами модального окна (см. Пример ниже).
Совет: × является предпочтительным объектом HTML для значков закрытия, а не буквы "x".
Модальные Header и Footer
Используйте классы 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>Modal Header</h2>
</header>
<div
class="w3-container">
<p>Какой-то текст..</p>
<p>Какой-то текст..</p>
</div>
<footer class="w3-container
w3-teal">
<p>Modal Footer</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>
Попробуйте сами »
Модальная форма входа
Этот пример создает модал для входа:
Модал с контент-вкладками
В этом примере создаётся модальное окно с контент-вкладками:
Закрыть модал
В приведенных выше примерах мы используем кнопку, чтобы закрыть модальное окно. Тем не менее, с небольшим количеством JavaScript, вы также можете закрыть модальные окна, нажав за пределами модального окна:
Пример
// Получить модал
var modal = document.getElementById('id01');
// Когда пользователь нажимает в любом месте за пределами модального окна, оно закрывается
window.onclick = function(event) {
if (event.target
== modal) {
modal.style.display = "none";
}
}
Попробуйте сами »
Дополнительно: лайтбокс (Модал Галерея изображений)
В этом примере показано, как добавить слайд-шоу изображений внутри модального окна, чтобы создать "лайтбокс":
Совет: Чтобы узнать больше о слайд-шоу, посетите раздел W3.CSS Слайд-шоу на нашем сайте.
Меню бургер
Меню аккордеон
Меню вкладки
Вертикальные вкладки
Заголовки вкладок
Вкладки полной страницы
Вкладки при наведении
Верхний навбар
Адаптивный верхний навбар
Навбар с иконками
Меню поиска по сайту
Панель поиска по сайту
Фиксированный сайдбар
Боковой сайдбар
Адаптивный сайдбар
Полноэкранный навбар
Меню Off-Canvas
Кнопки навбара при наведении
Сайдбар с иконками
Горизонтальное меню с прокруткой
Вертикальное меню
Нижняя навигация
Адаптивная нижняя навигация
Нижняя граница навигационных ссылок
Сайт работает на фреймворке W3.CSS.
