Html5 как открыть модальное окно при загрузке. Всплывающие и модальные окна с помощью HTML5 элемента "dialog"
Модальные окна - часто используемый инструмент в арсенале веб мастера. Он очень удачно подходит для решения большого количества задач, таких как вывод форм регистрации, рекламных блоков, сообщений и так далее.
Но, несмотря на важное место в информационном обеспечении проекта, модальные окна, как правило, реализуются на JavaScript, что может создавать проблемы при расширении функционала или обеспечении обратной совместимости.
HTML5 и CSS3 позволяют создавать модальные окна с необычайной легкостью.
Разметка HTMLПервый шаг на пути к созданию модального окна - простая и эффективная разметка:
Открыть модальное окно
Внутри элемента div размещается содержание модального окна. Также нужно организовать ссылку для закрытия окна. Для примера разместим простой заголовок и несколько параграфов. Полная разметка для нашего примера будет выглядеть следующим образом:
Открыть модальное окно X Модальное окно
Пример простого модального окна, которое может быть создано с использованием CSS3.
Его можно использовать в широком диапазоне, начиная от вывода сообщений и заканчивая формой регистрации.
СтилиСоздаем класс modalDialog и начинаем формировать внешний вид:
ModalDialog { position: fixed; font-family: Arial, Helvetica, sans-serif; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0,0,0,0.8); z-index: 99999; -webkit-transition: opacity 400ms ease-in; -moz-transition: opacity 400ms ease-in; transition: opacity 400ms ease-in; display: none; pointer-events: none; }
Наше окно будет иметь фиксированное положение, то есть смещаться вниз, если вы будете прокручивать страницу при открытом окне. Также наш фон черного цвета будет расширяться на весь экран.
Фон будет иметь небольшую прозрачность, а также располагаться поверх всех остальных элементов за счет использования свойства z-index .
В завершении устанавливаем переходы для вывода нашего модального окна и скрываем его в неактивном состоянии.
Может быть вы не знаете свойство pointer-events , но оно позволяет контролировать как элементы будут реагировать на нажатие кнопки мыши. Мы устанавливаем значение его значение для класса modalDialog , так как ссылка не должна реагировать на нажатие кнопки мыши когда активен псевдо класс “:target” .
Теперь добавляем псевдо класс :target и стили для модального окна.
ModalDialog:target { display: block; pointer-events: auto; } .modalDialog > div { width: 400px; position: relative; margin: 10% auto; padding: 5px 20px 13px 20px; border-radius: 10px; background: #fff; background: -moz-linear-gradient(#fff, #999); background: -webkit-linear-gradient(#fff, #999); background: -o-linear-gradient(#fff, #999); }
Псевдо класс target изменяет режим вывода элемента, поэтому наше модальное окно будет выводиться при нажатии на ссылку. Также мы изменяем значение свойства pointer-events .
Мы определяем ширину модального окна и положение на странице. Также определяем градиент для фона и скругленные углы.
Закрываем окноТеперь нужно реализовать функционал закрытия окна. Формируем внешний вид кнопки:
Close { background: #606061; color: #FFFFFF; line-height: 25px; position: absolute; right: -12px; text-align: center; top: -10px; width: 24px; text-decoration: none; font-weight: bold; -webkit-border-radius: 12px; -moz-border-radius: 12px; border-radius: 12px; -moz-box-shadow: 1px 1px 3px #000; -webkit-box-shadow: 1px 1px 3px #000; box-shadow: 1px 1px 3px #000; } .close:hover { background: #00d9ff; }
Для нашей кнопки устанавливаем фон и положение текста. Затем позиционируем кнопку, делаем ее круглой с помощью свойства скругления рамки и формируем легкую тень. При наведении курсора мыши на кнопку будем изменять цвет фона.
Элемент (от англ. dialog - диалог) создаёт диалоговое окно, в котором можно выводить сообщение или форму, например, для входа на сайт.
Диалоговое окно отображается со следующим предустановленным стилем.
Position: absolute; left: 0; right: 0; margin: auto; border: solid; padding: 1em; background: white; color: black;
Таким образом диалоговое окно отображается с белым фоном, чёрной рамкой и по центру горизонтальной оси. Ширина совпадает с шириной родительского контейнера.
Для отображения и сокрытия диалогового окна применяются, соответственно, методы show() и close() , как показано в примере ниже. Кроме того, диалог можно превратить в модальное окно, используя вместо show() метод showModal() . В этом случае остальные элементы на странице блокируются - текст нельзя выделить, а кнопки нажать до тех пор, пока диалоговое окно не будет закрыто. Также модальное окно можно закрыть клавишей Esc .
Синтаксис...
Закрывающий тегОбязателен.
Примерdialog body { background: url(/example/image/shark.jpg) no-repeat; background-size: cover; } dialog { background: rgba(255, 255, 255, 0.7); width: 300px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.5); border-radius: 5px; } Открыть окно
Полинезийцы называют Млечный путь Манго-Роа-И-Ата, что в переводе с маори означает «Длинная акула на рассвете».
Закрыть окно
var dialog = document.querySelector("dialog"); document.querySelector("#openDialog").onclick = function() { dialog.show(); // Показываем диалоговое окно } document.querySelector("#closeDialog").onclick = function() { dialog.close(); // Прячем диалоговое окно }Результат данного примера показан на рис. 1. При нажатии на кнопку «Открыть окно» отображается содержимое элемента , до этого невидимое. При нажатии на кнопку «Закрыть окно» диалоговое окно скрывается.
Рис. 1. Вид диалогового окна
СпецификацияКаждая спецификация проходит несколько стадий одобрения.
- Recommendation (Рекомендация ) - спецификация одобрена W3C и рекомендована как стандарт.
- Candidate Recommendation (Возможная рекомендация ) - группа, отвечающая за стандарт, удовлетворена, как он соответствует своим целям, но требуется помощь сообщества разработчиков по реализации стандарта.
- Proposed Recommendation (Предлагаемая рекомендация ) - на этом этапе документ представлен на рассмотрение Консультативного совета W3C для окончательного утверждения.
- Working Draft (Рабочий проект ) - более зрелая версия черновика после обсуждения и внесения поправок для рассмотрения сообществом.
- Editor"s draft (Редакторский черновик ) - черновая версия стандарта после внесения правок редакторами проекта.
- Draft (Черновик спецификации ) - первая черновая версия стандарта.
Особняком стоит живой стандарт HTML (Living ) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Многие процессы в вебе на сегодняшний день требуют согласия пользователя для своего завершения. Например, пользователям может понадобиться удалить аккаунт, сменить имя или подтвердить денежную операцию.
Общий подход в таких случаях - показ диалогового окна обычно с двумя кнопками; одна для отмены, другая для выполнени действия. Вот уже на протяжении многих лет для этого , однако в этом уроке собираемся сделать это нативными средствами при помощи экспериментального тега .
Использование элемента Dialogпоявился в HTML5 (в 5.1 если точнее). Он классифицируется как "корневой секционный" элемент, так же как и элементы , и каждый из которых устанавливает новый независимый блок с контентом. Вы можете разместить его как дочерний к body элемент или же использовать наподобие или – оба этих подхода правильные.
Поддерживающие браузеры (Chrome 37+ и Opera 27+) по умолчанию будут показывать элемент скрытым, делая его видимым при вызове show() или showModal() , а также close() чтобы снова скрыть его. Как правило, мы будем запускать этот метод при срабатывании события click , вот так:
Var $accountDelete = $("#delete-account"), $accountDeleteDialog = $("#confirm-delete"); $accountDelete.on("click", function() { $accountDeleteDialog.showModal(); }); $("#cancel").on("click", function() { $accountDeleteDialog.close(); });
Отличия между методами show() и showModal()Стоит отметить, что методы show() и showModal() ведут себя по-разному.
Метод show() открывает диалог в соответствии с его положением внутри DOM. Если вы добавили его непосредственно перед , он появится внизу страницы. Нам пришлось бы добавлять кастомные стили например для позиционирования диалога в центр страницы. Эти стили обычно используют для показа элемента выше других, выставляется свойство position в absolute , вместе с left и top .
Метод showModal() напротив покажет элемент как модальное окно. Оно будет отображаться по центру страницы, располагается в верхнем слое, как в fullscreen API , который предотвращает наложения применением z-index , относительного позиционирования (relative position) и overflow к родительскому элементу.
В большинстве случаев, вполне вероятно, мы будем использовать showModal() вместо метода show() .
Кастомизация стилейДиалоговое окно по умолчанию использует стили браузера, однако их можно переопределись, как и для большинства элементов. Например вы можете сделать границу диалогового окна тоньше, скруглить уголки и добавить тень.
К тому же, когда элемент показывается методом showModal() , мы имеем в своем распоряжении дополнительный псевдоэлемент::backdrop . Этот псевдоэлемент располагается непосредственно под диалоговым окном, перекрывая всю область просмотра (viewport).
Он используется в качестве прозрачного темного фона – кликните по красной кнопке, чтобы увидеть в действии:
Добавляем элегантность с помощью transitionsКастомизация стилей диалогового окна должна быть простой, но что по поводу добавления CSS transition? Что насчет плавного открытия окна, используя эффект масштабирования, примерно так же как это делает OS X?
Шаг 1Для начала мы уменьшим масштаб диалогового окна на 90%, применим transition и скроем окно с глаз долой.
Dialog { visibility: hidden; transform: scale(0.1); transition: transform 200ms; }
Шаг 2Теперь мы определяем класс, который будет масштабировать диалоговое окно до реального размера и делать его видимым.
Dialog.dialog-scale { visibility: visible; transform: scale(1); }
Шаг 3Наш трюк состоит в том, чтобы "задержать" диалоговое окно малого масштаба на несколько миллисекунд прежде чем добавить класс dialog-scale . Чтобы добиться этого, мы добавляем класс, используя js-метод setTimeout() :
Var transition; $accountDelete.on("click", function() { $accountDeleteDialog.showModal(); transition = setTimeout(function() { $accountDeleteDialog.addClass("dialog-scale"); }, 0.5); });
Шаг 4Не забываем удалить этот класс и очистить timeout при закрытии диалогового окна.
$("#cancel").on("click", function() { $accountDeleteDialog.close(); $accountDeleteDialog.removeClass("dialog-scale"); clearTimeout(transition); });
На этом все! Результат можно посмотреть на следующем демо:
Подводя итогреально удобен, но все же имеет место очень плохая поддержка браузерами. Если и когда все основные браузеры реализуют поддержку, мы будем меньше зависеть от библиотек, контент станет более семантичным и у нас будет стандартный метод для показа модальных диалогов.
http://caniuse.com/#feat=dialogА до тех пор можно использовать polyfil от Google Chrome для симуляции подобного поведения в браузерах, которые этого еще не поддерживают.
После огромного числа всплывающей рекламы на различных сайтах отношение к различным диалоговым окнам несколько негативное. Однако все безусловно зависит от цели, для которых они применяются. Порой их использование необходимо и значительно упрощает взаимодействие с пользователем.
Ранее для создания диалоговых окон требовалось подключить jQuery плагин вроде Pop Easy, Twitter Bootstrap Modal или jQuery UI Dialog. Однако теперь значительно выросший в возможностях HTML 5 позволяет избежать их использования, используя для этого встроенный элемент под названием .
Ранее в далеком 2009 году данный элемент уже был в составе HTML 5, однако был из него исключен. Теперь он снова возвращается — уже в новой форме.
Поддержка элемента браузерамиК сожалению, на данный момент его поддержка крайне ограничена. Его возможно использовать лишь в Safari 6.0 и Chrome Canary. При этом в Chrome Canary требуется его предворительно активировать в настройках. Для этого перейдите по адресу chrome://flags и включите “Enable experimental Web Platform features” .
Взаимодействие с HTMLDialogElement Методы:HTMLDialogElement имеет следующие методы, позволяющие работать с диалоговыми окнами.
- show() : Этот метод используется для открытия диалога. Отличие данного метода от следующего заключается в том, что у пользователей несмотря на открытое окошко диалога по прежнему есть возможность пользоваться страницей — они могут ее скролить, что-то копировать, переходить по ссылкам без перезагрузки страницы и т.п.
- showModal() : В данном случае у пользователя есть доступ лишь к открытому «модальному окну».
- close() : Данный метод закрывает диалог. Забегая немного вперед скажу, что в нем можно передать параметр returnValue.
HTMLDialogElement включает в себя следующие два атрибута.
- returnValue: Возвращает параметр, который был передан в close() — его указывать не обязательно, он опциональный.
- open: Является Boolean-типом данных. Что говорит о том, что он может принимать только два значения — true, в этом случае диалог будет показан пользователю, или false, тогда он скрыт.
Функция, вызывающаяся при закрытие онка, выглядит следующим образом:
dialog.addEventListener("close", function() { Сюда уже можно писать код для выполнения в случае закрытия окна });
Помимо выше упомнянутых методов и атрибутов, также поддерживает:
- form : Используется для интеграции формы с . Работает благодаря данной привязки только внутри диалогового окна.
- атрибут autofocus: Нужен для фокуса на инпутах внутри диалога.
- cancel event: Данный event будет срабатывать после закрытия окна через клавишу “Esc”.
Теперь, изучив основы , можно посмотреть на практике пример его использования.
Синтаксис создания диалоговых окон
Спасибо Hevix"у за отличный урок;)
Закрыть Открыть окноКод настолько понятен и прост, что думаю не требует пояснений. Что нужно понимать, это то, что содержание всплывающего окна заключается внутрь тега , а его вызов должен находится вне данного тега.
Для показа содержимого элемента требуется использование JavaScript, а именно вызов методов.show() и.close() . Они уже упоминались ранее.
(function() { var dialog = document.getElementById("Dialog"); document.getElementById("showDialog").onclick = function() { dialog.show(); }; document.getElementById("closeDialog").onclick = function() { dialog.close(); }; })();
(function () { document . getElementById ("showDialog" ) . onclick = function () { dialog . show () ; document . getElementById ("closeDialog" ) . onclick = function () { dialog . close () ; } ) () ; |
Все готово. Как видите мы использовали минимальное количество строк кода, несоизмеримое с тем, если бы мы подключали для этого сторонний плагин. Теперь при нажатие на кнопку «Открыть окно» вы увидите диалоговое окно, нажатие на кнопку «Закрыть» скроет его.
Стилизации диалоговых оконНе думаю, что нужно сильно погружаться в то, как стилизовать данное всплывающее окошко с помощью CSS. Здесь все предельно ясно и без моей помощи. Задам лишь его общий стиль для макета.
dialog { top: 28%; width: 400px; border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 15px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); border-top: 5px solid #eb9816; } button{ display: inline-block; border-radius: 3px; border: none; font-size: 0.9rem; padding: 0.4rem 0.8em; background: #eb9816; border-bottom: 1px solid #f1b75c; color: white; font-weight: bold; margin: 0 0.25rem; text-align: center; } button:hover, button:focus { opacity: 0.92; cursor: pointer; }
dialog { top : 28% ; width : 400px ; border : 1px solid rgba (0, 0, 0, 0.3 ) ; border-radius : 15px ; box-shadow : 0 3px 7px rgba (0, 0, 0, 0.3 ) ; border-top : 5px solid #eb9816 ; button { display : inline-block ; border-radius : 3px ; border : none ; font-size : 0.9rem ; padding : 0.4rem 0.8em ; background : #eb9816 ; border-bottom : 1px solid #f1b75c ; color : white ; font-weight : bold ; margin : 0 0.25rem ; text-align : center ; button:hover, button:focus { opacity : 0.92 ; cursor : pointer ; |
Если требуется полностью сфокусировать внимание пользователя на всплывающем окне, есть смысл использовать модальные диалоговые окна. Их вызов не сильно отличается от обычных. Требуется изменить лишь в JS файле.show() на the .showModal() . В HTML не нужно ничего менять.
(function() { var dialog = document.getElementById("Dialog"); document.getElementById("showDialog").onclick = function() { dialog. showModal(); }; document.getElementById("closeDialog").onclick = function() { dialog.close(); }; })();
(function () { var dialog = document . getElementById ("Dialog" ) ; |
Разработка HTML-формы для диалогового окна
В качестве интерфейса записной книжки мы создадим диалоговое окно (пользовательскую форму), которое показано на рис. 7.3.
Рис. 7.3. Диалоговое окно для работы с записной книжкой
Эта форма реализуется с помощью HTML-файл Phone.htm, который полностью приведен в листинге 7.6.
В самом начале файла Phone.htm ставится тег , указывающий на то, что содержимым файла является текст в формате HTML, а также теги и , внутри которых задаются используемая кодировка (charset=windows-1251) и заголовок формы (теги и ):
Форма для записной книжки
Для того чтобы задать цвет формы, в теге используется атрибут bgcolor со значением " silver ":
Атрибут scroll="no" указывает на то, что в диалоговом окне не должно быть полос прокрутки.
Наша форма состоит из семи текстовых полей ввода (табл. 7.2) и восьми кнопок (табл. 7.3).
Таблица 7.2. Поля ввода диалогового окна для работы с записной книжкой
| txtLastName | 50 | Поле для ввода фамилии |
| txtName | 50 | Поле для ввода имени |
| txtPhone | 15 | Поле для ввода номера телефона |
| txtStreet | 50 | Поле для ввода названия улицы |
| txtHouse | 10 | Поле для ввода номера дома |
| txtApp | 5 | Поле для ввода номера квартиры |
| txtNote | 80 | Поле для ввода примечания |
Таблица 7.3. Кнопки диалогового окна для работы с записной книжкой
| btnNext | Переход к следующей записи | |
| >> | btnFinal | Переход к последней записи |
Команды, создающие форму, находятся внутри тегов и . Сами текстовые поля ввода и кнопки создаются в HTML-файле с помощью одного и того же тега . Внутри этого тега нужно указать несколько атрибутов:
Type - определяет тип элемента управления (для поля ввода type="text" , для кнопки type="button");
Name - задает имя элемента управления;
Size - определяет длину строки поля ввода в символах;
Value - задает надпись на кнопке.
Для того чтобы поля ввода располагались точно друг под другом, мы поместим их в таблицу с невидимыми границами, состоящую из двух столбцов: в первом находится описание (метка) для поля, во втором - сам элемент управления. Таблица в HTML-файле создается с помощью парных тегов
| и | , определяющие одну ячейку таблицы, например:Фамилия | указывается аргумент width , задающий ширину строки в процентах от общей ширины строки. Кнопки в форме выводятся друг за другом, нужное расстояние между ними достигается с помощью неразрывных пробелов (escape-последовательность ), например: Листинг 7.6. Описание формы в HTML-файле (Phone.htm) Форма для записной книжки
|