Работая с этим сайтом, вы даете своё согласие на использование файлов cookies. Это необходимо для нормального функционирования сайта, анализа трафика. Подробнее можно почитать в нашей Политике конфиденциальности

Новый элемент dialog в HTML 5.2: первое знакомство

Новый элемент dialog в HTML 5.2: первое знакомство

В конце прошлого года W3C опубликовало рекомендации HTML 5.2 в котором было описан новый элемент для нативных модальных окон dialog. Довольно прост в работе, что наглядно покажет демо.

Базовая разметка модального окна очень простая:

<dialog open>
  Native dialog box!
</dialog>

Атрибут open указывает на то, что диалоговое окно будет открыто, если его убрать, оно будет, соответственно, закрыто и для его открытия понадобиться jаvascript. Без указания какой-либо стилизации этого окна, оно будет выглядеть следующим образом:

Новый элемент dialog в HTML 5.2: первое знакомство

По умолчанию он абсолютно позиционирован и по ширине равен ширине контента. Также у него горизонтальная централизация.

Базовый jаvascript

Чтобы облегчить работу с модальными окнами в jаvascript есть несколько методов и свойств. showModal() и close() — это два основных метода для открытия и закрытия окна.

const modal = document.querySelector('dialog');

// показывает диалог (добавляет атрибут "open")
modal.showModal();

// скрывает диалог (удаляет атрибут "open")
modal.close();

Если использовать для открытия диалога showModal(), на страницу будет добавлен фон. Он блокирует взаимодействие пользователя на странице вне модального окна. По умолчанию данный фон прозрачный, но на него можно добавить стилизованное оформление с помощью CSS. Второй метод это show(), однако он не добавляет фона под модальное окно. Окно остаётся открытым в то время как пользователь может взаимодействовать со страницей вне окна.

Для закрытия окна используется метод close(), но также срабатывает Esc.

Поддержка браузером

На данный момент полноценное поддержка метода dialog есть только у Google Chrome. В Firefox только базовая стилизация. Но я думаю скоро любимая лисичка будет полноценно поддерживать его. Однако благодаря профиллу уже сейчас можно сделать полноценную поддержку во всех современных браузера. Подключается он через тег script. Поддержка в IE9+.

Каждое диалоговое окно при использовании профилла нужно инициализировать его:

dialogPolyfill.registerDialog(modal);

Стоит также учесть, что профилл не заменяет нативную поддержку, если такова есть в браузере.

Стилизация

Стилизация модального окна делается также легко, как и любой другой элемент на странице. А для стилизации фона используется специальный псевдоэлемент ::backdrop.

dialog {
  padding: 0;
  border: 0;
  box-shadow: 0 0 1em black;
}

dialog::backdrop {
  /* сделает фон черным полупрозрачным */
  background-color: rgba(0, 0, 0, 0.4);
}

Для остальных браузеров, в которых нет нативной поддержки и нет поддержки псевдокласса. Для этого профилл добавляет фону новый класс .backdrop, он идёт прямо за диалоговым окном и его можно стилизовать уже например так:

dialog + .backdrop {
  background-color: rgba(0, 0, 0, 0.4);
}

Теперь можно добавить немного разметки для окна. Разделим его на три части: заголовок, тело и подвал.

<dialog id="demo-modal">
  <h3 class="modal-header">Нативное модальное окно</h3>
  <div class="modal-body">
    <p>Отличные модальные окна, которые добавлены в HTML</p>
    <p>Отличная альтернатива JQueryUI</p>
  </div>
  <footer class="modal-footer">
    <button id="like-it" type="button">Мне нравится</button>
  </footer>
  <button id="close" class="close" type="button">×</button>
</dialog>

Ну, а дальнейшее оформление и стилизация уже зависит от твоих фантазии и умений, чтобы оно выглядело как тебе нужно.

Контроль

Чтобы иметь немного больше контроля или хочешь вызывать какие-то действия по наступлению некоторых событий, например для закрытии окна сделать какое-нибудь действие или передать на страницу какой-нибудь текст. Это действие можно передать на метод close(). Это значение присваивается свойству returnValue DOM-элемента dialog, и его можно прочитать позже.

modal.close('Accepted');

console.log(modal.returnValue); // выведет `Accepted`

Подобным образом можно передавать не только на close(), но и на cancel().

Главным недостатком является отсутствие поддержки закрытие модального окна при клике по фону. Клик по фону вызывает событие клика на dialog как на целевом элементе. И если вы создадите диалог так, что дочерние элементы будут заполнять все пространство диалогового окна, эти дочерние элементы будут целевыми для любых кликов внутри диалога. Таким образом, вы можете подписаться на события клика по диалогу, и закрыть его когда непосредственной целью клика будет само окно диалога:

modal.addEventListener('click', (event) => {
  if (event.target === modal) {
    modal.close('cancelled');
  }
});

Ну и рабочий пример

В демо включен профилл, так что оно будет работать почти во всех браузерах.


Вверх
Войти на сайт
или

Восстановить пароль Регистрация