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">&times;</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">&times;</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:

Пример:

Посмотреть демо

Анимационное модальное окно

Используйте любой из классов 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">

Посмотреть демо

Кроме этого можно сделать так, чтобы модальное окно JavaScript постепенно появилось на заднем фоне, добавив класс w3-animate-opacity в элемент с классом w3-modal.

Пример:

<div class="w3-modal w3-animate-opacity">

Посмотреть демо

Модальное изображение

Пример:

<img src="img_fjords.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_fjords.jpg">
</div>

Посмотреть демо

Модальная галерея изображений

Пример:

<div class="w3-row-padding">
  <div class="w3-container w3-third">
    <img src="img_fjords.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";
  }
}

Посмотреть демо

Расширение: Lightbox (модальная галерея изображений)

Этот пример показывает, как добавить слайд-шоу в модальные окна, чтобы создать Lightbox:

Посмотреть демо

Перевод статьи “W3.CSS Modal” был подготовлен дружной командой проекта Сайтостроение от А до Я.