Создание модальных и всплывающих окон с помощью элемента HTML5 “dialog”
На сегодняшний день в Интернете для выполнения многих действий требуется получение подтверждения от пользователя. Например, когда пользователям нужно удалить учетную запись, изменить логин или подтвердить денежный перевод.
В таких случаях чаще всего используется диалоговое окно с двумя кнопками: одна для отмены действия, вторая — для подтверждения. В течение многих лет мы использовали для этого библиотеки JavaScript . Но в этой статье мы попробуем сделать это с помощью экспериментального тега .
Применение элемента dialog
Поддерживающие браузеры ( Chrome 37+ и Opera 27+ ) выводят элемент по умолчанию скрытым. Он становится видимым только по запросу с использованием методов JavaScript show() или showModal() , метод close() снова скрывает элемент. Как правило, мы запускаем эти методы внутри события click , например, следующим образом:
Стоит отметить, что методы show() и showModal() характеризуются различным поведением.
Метод show() выводит элемент в соответствии с его положением внутри DOM . Если вы добавили его непосредственно перед закрывающимся тегом
, то он появится в нижней части страницы. Нам нужно добавить собственные стили, чтобы настроить его размещение, например, если мы хотим поместить его в центре страницы. Для этого используют свойство z-index , чтобы вывести элемент поверх других элементов; для свойства position устанавливаются значения absolute , left и top .
Метод showModal() , в свою очередь, будет отображать элемент в виде модального окна. Оно будет отображаться в центре страницы по умолчанию и располагаться в верхнем слое, что решает проблему z-index , связанную с положением и перекрытием родительским элементом.
В большинстве случаев удобнее использовать метод showModal() , а не show() .
Настройка стилей
Диалоговое окно имеет стили браузера по умолчанию, которые можно легко переопределить. Вы можете, например, сделать рамку диалогового окна более тонкой, скруглить углы, а также добавить тень.
Когда элемент выводится в виде модального окна ( с помощью метода showModal() ), у нас в распоряжении есть дополнительный псевдоэлемент ::backdrop . Он располагается непосредственно под диалоговым окном, и перекрывает всю видимую часть экрана и все элементы под ним.
Общим стилем для него является фон темного цвета с низкой прозрачностью — кликните красную кнопку в приведенном ниже примере, чтобы увидеть его в действии:
Добавление перехода
Давайте добавим переход, чтобы диалоговое окно открывалось постепенно, с помощью эффекта масштабирования.
Шаг 1
Сначала мы уменьшим окно на 90%, укажем переход и сделаем окно скрытым:
Шаг 2
Определим селектор класса, который будет масштабировать окно до предполагаемого размера и делать его видимым:
Шаг 3
Хитрость заключается в том, что мы будем » удерживать » диалоговое окно в уменьшенном размере в течение нескольких миллисекунд, прежде чем добавим класс dialog-scale . Чтобы достичь этого, мы используем для добавления класса метод JavaScript setTimeout() :
Результат вы можете увидеть в приведенном ниже примере:
Заключение
Элемент действительно удобен в применении, хотя он слабо поддерживается браузерами. Если в большинстве популярных браузеров будет реализована его поддержка, то мы будем меньше зависеть от библиотек, и появится легкий и удобный способ создания модальных диалоговых окон:
До тех же пор вы можете использовать решение от Google Chrome , чтобы имитировать этот элемент в браузерах, которые его не поддерживают.
Вадим Дворников автор-переводчик статьи « Active Pop ps and Modes With the HTML5 “dialog” Elements »
Давным давно, в спецификацию HTML5 был введён некий элемент, вернее его реинкарнация, решающая проблему диалоговых и модальных окон, которые все мы так любим использовать на различных сайтах. Но, к сожалению, я настолько был так рад его появлению, что даже не заметил этого события. Хотя потеря и не велика для нынешнего положения браузерных дел — раз элемент есть, нужно с ним разобраться.
Поддержка браузерами
Нет, это не два моих любимых браузера и не нужно искать какой-то скрытый смысл тут — это всего лишь те браузеры, которые за год (почти год) научились поддерживать данный элемент.
Конечно, если вы пришли из будущего или этой статье уже не первый день, то проверить какие браузеры уже научились поддерживать этот элемент можно посмотреть тут.
Поле для экспериментов получается у нас небольшое. Жаль.
Уходя от горьких нот в части введения и поддержки браузерами, давайте перейдём к самому интересному — практике.
Разметка
Раньше диалоговые и модальные окна верстались примерно так:
Dialog
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis, neque quasi. Distinctio sapiente modi, sequi libero unde blanditiis impedit sit dolorem vero deleniti facilis a debitis voluptatum. Laboriosam, nostrum sint!
Close
Сейчас же это делается немного иначе:
Отличий не так много, но они существенны:
Если добавить к элементу атрибут open , то перед нами предстанет само диалоговое окно:
Мне такой вид совсем не улыбается и работать с таким «красавцем» мне не хочется. Давайте приукрасим наш элемент:
В данной статье речь идёт не об умении использовать CSS, поэтому стили диалогового окна вы можете написать сами или посмотреть по ссылкам на jsFiddle прилагаемым к каждому пункту 🙂
Франкенштейн
Для того, чтобы наш элемент был полезным, его нужно оживить. Поможет нам в этом интерфейс элемента . В этом разделе статьи мы обговорим теорию использования элемента.
И перед тем, как начать говорить о методах и свойствах, которые предоставляет нам API, нужно расставить все точки над понятием диалогового и модального окна:
Диалоговым окном называют такое окно, которое временно появляется поверх приложения (в нашем случае сайта) и запрашивает и/или предоставляет различную информацию.
Модальное окно
Модальным окном называют такое диалоговое окно, которое блокирует работу пользователя с родительским приложением (в нашем случае сайта) до тех пор, пока пользователь это окно не закроет.
Благодаря интерфейсу HTMLDialogElement , который несёт в себе несколько свойств, методов и событий, мы сможем управлять нашим диалогом. Рассмотрим этот интерфейс подробнее.
Методы
Нам доступны три метода, которые позволяют:
show() — Открыть диалоговое окно.
showModal() — Открыть модальное окно.
close() — Закрыть окно.
Свойства
В свойствах тоже нет большого разнообразия:
returnValue — Возвращаемое значение, которое можно передать в close() .
open — Логическое значение. Если true, то окно показано, если false, то окно скрыто.
События
Разное
Помимо основных методов и свойств, элемент также поддерживает:
form[method=»dialog»] — Интеграция с формы с элементом. Действует только внутри диалогового и модального окна.
autofocus — Перемещение фокуса на элемент управления формой внутри окна.
cancel — Закрытие окна при нажатии кнопки Esc .
Маловато будет! Перейдём к примерам работы.
Реализация
Давайте попробуем реализовать диалоговые и модальные окна и их взаимодействие с окружающими и внутренними элементами.
Для примеров я буду использовать библиотеку Zepto.
Библиотека Zepto по своей сути является аналогом всем известной библиотеки jQuery. Основное отличие заключается в поддержке браузеров и некотором несущественном расхождении в API.
Вот именно сейчас в вас может заиграть желание сетовать на отсутствие ванильного JavaScript в примерах, однако поспешу вас разочаровать — камнем преткновения для нас с вами будет сайт «You Might Not Need jQuery», на котором вы сможете посмотреть реализацию используемых плюшек библиотеки Zepto на ванильном JavaScript. Не думаю, что эта процедура займёт у вас уйму времени. Мне же библиотека даст возможность обратить немного больше внимания на интерфейс HTMLDialogElement , чем на реализацию некоторых побочных функций.
Открытие и закрытие диалогового окна.
Для того, чтобы работать со многими диалоговыми окнами как раз и были введены атрибуты data-tools и data-target .
// Получаем массив всех кнопок с атрибутом [data-tools = dialog] var dialogs = $('button[data-tools="dialog"]'); // Перебираем в цикле каждый элемент $.each(dialogs, function(i) < var dialog = $(dialogs[i]); // Извлекаем ID вызываемого диалогового окна [data-target = ID] var target = $(dialog.data('target')); // Обрабатываем событие нажатие кнопки dialog.on("click", function(even) < // Отображаем окно ([0] здесь применяется для вызова нативного метода show) target[0].show(); >); // Обрабатываем нажатие кнопки закрытия target.find('button[data-action="modal-close"]').on("click", function(even) < // Закрываем окно ([0] здесь применяется для вызова нативного метода close) target[0].close(); >); >);
Открытие и закрытие модального окна. Затемнение.
Работа с модальными окнами полностью повторяет таковую с диалоговым окном с той лишь разницей, что метод show() заменяется на showModal .
Теперь наше окно выглядит иначе:
Центрирование не только по горизонтали, но и по вертикали.
Окно отбрасывает на всю страницу фон.
Пользователь не может взаимодействовать с объектами на странице, отличными от объектов самого окна.
Управлять «тенью» можно с помощью CSS, используя псевдоэлемент ::backdrop :
Для примера, я изменил цвет затемнения на синий:
Возвращение значения из модального или диалогового окна.
Для передачи значения мы будем использовать метод close() и событие закрытия close .
// Получаем массив всех кнопок с атрибутом [data-tools = dialog] var dialogs = $('button[data-tools="dialog"]'); // Перебираем в цикле каждый элемент $.each(dialogs, function(i) < var dialog = $(dialogs[i]); // Извлекаем ID вызываемого диалогового окна [data-target = ID] var target = $(dialog.data('target')); // Обрабатываем событие нажатие кнопки dialog.on("click", function(even) < // Отображаем окно ([0] здесь применяется для вызова нативного метода show) target[0].show(); >); // Обрабатываем нажатие кнопки закрытия target.find('button[data-action="modal-close"]').on("click", function(even) < // Получаем введённое значение var value = $('input[name="value"]').val(); // Закрываем окно ([0] здесь применяется для вызова нативного метода close) // Возврат значения из диалога target[0].close(value); >); // Обрабатываем событие закрытия модального окна target.on("close", function(even) < // Для примера, отображаем возвращённые данные, используя alert alert(this.returnValue); >); >);
После закрытия модального или диалогового окна, будь это событие нажатия на кнопку закрытия или нажатие клавиши Esc , будет отображено введённое значение:
Разумеется, что картинка «фотошоп» для наглядности, так как alert появился после закрытия модального окна.
Интеграция формы в диалоговое или модальное окно
Как уже говорилось ранее, интерфейс HTMLDialogElement предполагает наличие отдельного метода для управления диалоговым и модальным окном c помощью формы.
Немного изменим нашу разметку:
Теперь наше модальное окно выглядит так:
Осталось только слегка поменять наш скрипт. Нам нужно избавиться от обработчика кнопки закрытия окна и обработать возвращаемое значение.
// Получаем массив всех кнопок с атрибутом [data-tools = dialog] var dialogs = $('button[data-tools="dialog"]'); // Перебираем в цикле каждый элемент $.each(dialogs, function(i) < var dialog = $(dialogs[i]); // Извлекаем ID вызываемого диалогового окна [data-target = ID] var target = $(dialog.data('target')); // Обрабатываем событие нажатие кнопки dialog.on("click", function(even) < // Отображаем окно ([0] здесь применяется для вызова нативного метода show) target[0].show(); >); // Обрабатываем событие закрытия модального окна target.on("close", function(even) < // Для примера, отображаем возвращённые данные, используя alert var value = this.returnValue === 'yes' ? "Yes!" : "Noooooooooooooooooooooooooooooooo!"; alert(value); >); >);
Вот и всё! Соизвольте наслаждаться полученным результатом:
Спасение от Google
К сожалению, как и говорилось в самом начале статьи — поддержка браузерами у элемента скудная и не соответствует реалиям. Исправить это досадное положение призван полифил от команды Google Chrome, который добавляет полную поддержку данного элемента во все браузеры.
Для его использования необходимо подключить к странице сам полифил (CSS и JS) и, скажем так, активировать его:
dialogPolyfill.registerDialog(dialog);
При всём этом, затемнение фона так же поддерживается. Всего лишь нужно заменить конструкцию вида:
Деликатное решение проблемы 🙂
Вывод
Использовать элемент можно уже сейчас (если вам не мешает лишний полифил), однако, стоит обратить внимание на рациональность этого решения в вашем проекте.
Помимо всех удобств, что мы уже рассмотрели на примерах в статье, есть ещё одно, которое позволяет не придерживаться идеологии z-index для диалоговых и модальных окон — Стек «верхнего слоя». Браузер сам заботится о том, что последнее вызванное вами окно будет находиться поверх всех остальных и его не перекроет какой-либо другой элемент.
Читайте новостные порталы по тематике веб-разработки, причём регулярно и не только на хорошо известных вам языках.
Делимся на оплату хостинга или кофе. Чем чаще пью кофе, тем чаще пишу статьи.
