html код диалоговое окно
Простое создание модального окна с помощью элемента HTML5 dialog
Модальное окно – один из наиболее часто используемых элементов пользовательского интерфейса, который мы можем найти на веб-сайтах всемирной паутины.
Оно часто используется, чтобы отобразить форму подписки, форму для загрузки файла (как например в WordPress), для отображения уведомлений и в других случаях, когда требуется привлечь внимание пользователя к чему-то важному.
Использование элемента dialog
Использование элемента ничем не отличается от использования других элементов HTML.
Достаточно просто добавить контент, который мы желаем отобразить внутри модального окна:
Однако заметьте, что когда вы откроете этот пример в Google Chrome (единственный браузер, который на данный момент поддерживает тэг dialog ), диалоговое окно по умолчанию скрыто.
И приведённый выше HTML код отобразит только кнопку « Показать диалоговое окно ». Чтобы отобразить диалоговое окно, мы можем использовать JavaScript.
Нажмите на кнопку « Показать диалоговое окно », и оно отобразиться посередине окна браузера.
Оно помогает посетителям сконцентрироваться на диалоговом окне и скрыть всё, что расположено за ним. Судя по всему, на данный момент эта опция не реализована, однако будет поддерживаться в будущем.
Заключение
Язык HTML очень сильно эволюционировал за последние несколько лет. Он больше не используется исключительно для построения веб-страниц, мы теперь можем строить интерактивный пользовательский интерфейс при помощи новых элементов HTML, таких как и кода JavaScript.
Делаем модальные окна для сайта. Заботимся об удобстве и доступности
Я занимаюсь вёрсткой и программированием сайтов. Почти в каждом макете, который я верстал, были модальные окна. Обычно это формы заказа звонка в лендингах, уведомления о завершении каких-то процессов, или сообщения об ошибках.
Вёрстка таких окон сначала кажется простой задачей. Модальные окна можно сделать даже без помощи JS только лишь с помощью CSS, но на практике они оказываются неудобными, и из-за маленьких недочетов модальные окна раздражают посетителей сайта.
В итоге было задумано сделать собственное простое решение.
Вообще говоря, есть несколько готовых скриптов, JavaScript библиотек, реализующих функционал модальных окон, например:
(в статье не рассматриваем решения на базе Frontend-фреймворков)
Несколькими из них я пользовался сам, но почти у всех находил какие-то недостатки. Некоторые из них требуют подключения библиотеки jQuery, которая есть не на всех проектах. Для разработки своего решения, нужно сначала определиться с требованиями.
Что мы ждём от модальных окон? Отвечая на этот вопрос, я основывался на докладе «Знакомьтесь, модальное окно» Анны Селезнёвой, а так-же на относительно старой статье NikoX «arcticModal — jQuery-плагин для модальных окон».
Итак, чтобы нам хотелось видеть?
Дисклеймер: Прежде чем мы рассмотрим подробности, сразу дам ссылку на готовый код получившейся библиотеки (HystModal) на GitHub, а также ссылку на демо+документацию.
1. Разметка HTML и CSS
1.1. Каркас модальных окон
Как открыть окно быстро? Самое простое решение: разместить всю разметку модального окна сразу в HTML странице. Затем скрывать/показывать это окно при помощи переключения классов CSS.
Набросаем такую разметку HTML (я назвал этот скрипт «hystmodal»):
Элемент dialog HTML
Дата публикации: 2018-10-17
От автора: давайте поговорим о всплывающих окнах. Или модалах, оверлеях или как вам нравится их называть (не забудьте, лайтбокс). Несмотря на то, что многим пользователям это не нравится, эти элементы остаются популярными в Интернете. Но их технические реализации могут быть дико непоследовательными. Хотите больше не изобретать велосипед? Этот пост поможет вам решить задачу, как отобразить контент поверх другого контента.
Проблема
Реализация решений для всплывающих окон может быть непростой. То, что на первый взгляд кажется тривиальным, может оказаться более сложным в условиях нехватки времени. Возможно, вам придется учитывать дизайн модалов. И анимацию. Как насчет индивидуального поведения при представлении форм? Что произойдет, если одновременно будет выведено несколько модалов?
Вы можете найти решение с помощью плагинов. Но есть так много вариантов и вопросов, которые следует учитывать:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Зависимости. Возможно, вам не нужны jQuery, React или подобное.
Поддержка. Кто его поддерживает? Как скоро решаются вопросы?
Расширяемость. Насколько легко настроить и добавить новые функции?
Конечно, вы можете вместо этого создать свой собственный плагин. Но насколько это гибкое решение? Можете ли вы повторно использовать его как есть в других местах? Как насчет других проектов?
Решение
Введите элемент HTML dialog! Представленный в HTML 5.2 (2018), dialog является оригинальным элементом браузера для создания всплывающих окон и модалов.
Нативные модальные окна в HTML5 с помощью элемента dialog
Дата публикации: 2015-01-08
От автора: Каждый из нас оказывался в ситуации, когда нужно сделать ответственный выбор, находясь онлайн: оформление заказа, голосование, удаление аккаунта. Эти неизменные действия очень часто требуют промежуточного шага, небольшого напоминания, которое позволило бы удостовериться в том, что пользователь действительно хочет продолжить или завершить действие. Чтобы предотвратить возникновение ошибок, подобные напоминания обычно делают в виде модального окна: элемент пользовательского интерфейса, который перехватывает управление страницей и заставляет пользователя сделать некий выбор (обычно Да/Нет) перед продолжением.
Традиционно такие модальные окна создавались с помощью JavaScript, в большинстве случаев с использованием фреймворков или библиотек. Сегодня подобная модальная сущность имеет нативную (встроенную) поддержку в HTML5 (если быть точнее, то в версии HTML 5.1: элемент не совсем входит в официальную HTML5 спецификацию). Процесс добавления данного нового элемента на страницу является очень простым:
Разметка
Базовая разметка для нативного диалогового окна не будет для вас чем-то неожиданным:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
По умолчанию браузер не должен показывать содержимое элемента до тех пор, пока оно не будет отображено с помощью добавления атрибута open. Данный атрибут можно добавить, используя один из методов, о котором я собираюсь рассказать далее. В качестве действия, вызывающего появление диалогового окна, могут использоваться различные варианты: загрузка страницы, нажатие (клик) по большой красной кнопке или что-нибудь еще. Например, пусть это будет загрузка страницы:
Если вы попробуете посмотреть результат в одном из поддерживающих данную возможность браузеров (на момент написания статьи это Chrome и Opera), то вы увидите, что элемент dialog расположен в самом верху окна браузера. Вы также заметите, что вы по-прежнему можете взаимодействовать с контентом на странице (выделять текст, активировать другие элементы пользовательского интерфейса и т.д.). Это сильно отличается от вызова элемента dialog в качестве модального окна: измените dialog.show() на dialog.showModal() и перезагрузите страницу.
И хотя содержимое элемента dialog никак не изменилось, вы увидите несколько важных изменений, присущих API (программный интерфейс приложения) showModal(): сейчас окно уже размещается в центре области просмотра (viewport), а остальная часть страницы затемнена и недоступна для взаимодействия.
Управление и закрытие
Теоретически, элемент dialog может содержать любую информацию, на которой нужно заострить внимание пользователя: форма, видео или любой другой элемент. Одновременно у вас может быть открыто много элементов dialog, но — только одно модальное окно. В любом случае, вам наверняка потребуется элемент пользовательского интерфейса, который будет закрывать подобные окна. Для этого мы можем использовать созданную ранее кнопку «Отмена»:
В демо-примере к данной статье обе кнопки закрывают диалоговое окно, но больше ничего не делают. Чтобы это исправить, им потребуется передавать данные. А об этом я расскажу уже в другой статье.
Оформление
Элемент dialog можно оформлять с помощью обычного CSS:
Практический курс по верстке адаптивного сайта с нуля!
Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3
Дополнительно, API showModal() создает новый псевдо-элемент ::backdrop, который по умолчанию закрывает всю область просмотра и может быть оформлен отдельно:
На практике, модальные диалоговые окна рассматриваются, как промежуточный шаг на пути к полноэкранному API: подобно полноэкранному контенту модальные диалоговые окна захватывают управление областью просмотра, но в тоже время они необязательно должны вызываться пользователем. Модальные диалоговые окна могут вызываться и при загрузке страницы, а вот полноэкранный контент — нет.
Важно отметить, что окно элемента dialog появляется на самом верхнем уровне (слое) области просмотра. Это значит, что никакое значение свойства z-index не способно поместить другой элемент поверх элемента dialog. Это также означает, что расположение (позиционирование) элемента dialog не будет унаследовано ни от какого родительского элемента. Для непосредственного выравнивания данного элемента было предложено CSS свойство anchor-point, но пока что оно не имеет браузерной поддержки и не работает даже с использованием полифилла (polyfill).
Поддержка
Элемент dialog до сих пор не имеет хорошей кроссбраузерной поддержки: он поддерживается только в Chrome 37+ и Opera 24+ на десктопных и мобильных устройствах, хотя, несомненно, остальные браузеры к ним присоединятся. Между тем у Google есть отличный диалоговый полифилл, который не привязан к какому-либо фреймворку и работает путем вставки нескольких добавлений в ваш CSS.
Независимо от того, используете ли вы полифилл или нет, браузерное определение возможностей ориентировано на подход, который используется во многих тестах поддержки возможностей: создание элемента с помощью JavaScript и проверка на добавление к нему значения атрибута.
Элемент HTML5 dialog
Введение
Давным давно, в спецификацию HTML5 был введён некий элемент, вернее его реинкарнация, решающая проблему диалоговых и модальных окон, которые все мы так любим использовать на различных сайтах. Но, к сожалению, я настолько был так рад его появлению, что даже не заметил этого события. Хотя потеря и не велика для нынешнего положения браузерных дел — раз элемент есть, нужно с ним разобраться.
Поддержка браузерами
Вместо тысячи слов:
Нет, это не два моих любимых браузера и не нужно искать какой-то скрытый смысл тут — это всего лишь те браузеры, которые за год (почти год) научились поддерживать данный элемент.
Конечно, если вы пришли из будущего или этой статье уже не первый день, то проверить какие браузеры уже научились поддерживать этот элемент можно посмотреть тут.
Поле для экспериментов получается у нас небольшое. Жаль.
Уходя от горьких нот в части введения и поддержки браузерами, давайте перейдём к самому интересному — практике.
Разметка
Раньше диалоговые и модальные окна верстались примерно так:
Сейчас же это делается немного иначе:
Отличий не так много, но они существенны:
Мне такой вид совсем не улыбается и работать с таким «красавцем» мне не хочется. Давайте приукрасим наш элемент:
В данной статье речь идёт не об умении использовать CSS, поэтому стили диалогового окна вы можете написать сами или посмотреть по ссылкам на jsFiddle прилагаемым к каждому пункту 🙂
Франкенштейн
И перед тем, как начать говорить о методах и свойствах, которые предоставляет нам API, нужно расставить все точки над понятием диалогового и модального окна:
Диалоговое окно
Диалоговым окном называют такое окно, которое временно появляется поверх приложения (в нашем случае сайта) и запрашивает и/или предоставляет различную информацию.
Модальное окно
Модальным окном называют такое диалоговое окно, которое блокирует работу пользователя с родительским приложением (в нашем случае сайта) до тех пор, пока пользователь это окно не закроет.
Методы
Нам доступны три метода, которые позволяют:
Свойства
В свойствах тоже нет большого разнообразия:
События
А тут у нас всё ещё хуже:
Разное
Помимо основных методов и свойств, элемент также поддерживает:
Маловато будет! Перейдём к примерам работы.
Реализация
Давайте попробуем реализовать диалоговые и модальные окна и их взаимодействие с окружающими и внутренними элементами.
Для примеров я буду использовать библиотеку Zepto.
Zepto
Библиотека Zepto по своей сути является аналогом всем известной библиотеки jQuery. Основное отличие заключается в поддержке браузеров и некотором несущественном расхождении в API.
Открытие и закрытие диалогового окна.
Открытие и закрытие модального окна. Затемнение.
Теперь наше окно выглядит иначе:
Кратко об изменениях:
Управлять «тенью» можно с помощью CSS, используя псевдоэлемент ::backdrop :
Для примера, я изменил цвет затемнения на синий:
Возвращение значения из модального или диалогового окна.
Разумеется, что картинка «фотошоп» для наглядности, так как alert появился после закрытия модального окна.
Интеграция формы в диалоговое или модальное окно
Как уже говорилось ранее, интерфейс HTMLDialogElement предполагает наличие отдельного метода для управления диалоговым и модальным окном c помощью формы.
Немного изменим нашу разметку:
Теперь наше модальное окно выглядит так:
Осталось только слегка поменять наш скрипт. Нам нужно избавиться от обработчика кнопки закрытия окна и обработать возвращаемое значение.
Вот и всё! Соизвольте наслаждаться полученным результатом:
Спасение от Google
К сожалению, как и говорилось в самом начале статьи — поддержка браузерами у элемента скудная и не соответствует реалиям. Исправить это досадное положение призван полифил от команды Google Chrome, который добавляет полную поддержку данного элемента во все браузеры.
Для его использования необходимо подключить к странице сам полифил (CSS и JS) и, скажем так, активировать его:
При всём этом, затемнение фона так же поддерживается. Всего лишь нужно заменить конструкцию вида:
Деликатное решение проблемы 🙂
Вывод
Использовать элемент можно уже сейчас (если вам не мешает лишний полифил), однако, стоит обратить внимание на рациональность этого решения в вашем проекте.
Помимо всех удобств, что мы уже рассмотрели на примерах в статье, есть ещё одно, которое позволяет не придерживаться идеологии z-index для диалоговых и модальных окон — Стек «верхнего слоя». Браузер сам заботится о том, что последнее вызванное вами окно будет находиться поверх всех остальных и его не перекроет какой-либо другой элемент.
Читайте новостные порталы по тематике веб-разработки, причём регулярно и не только на хорошо известных вам языках.
Делимся на оплату хостинга или кофе.
Чем чаще пью кофе, тем чаще пишу статьи.