HTML-приложения: использование диалоговых окон (ч.1)

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

Но, несмотря на важное место в информационном обеспечении проекта, модальные окна, как правило, реализуются на 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; }

Для нашей кнопки устанавливаем фон и положение текста. Затем позиционируем кнопку, делаем ее круглой с помощью свойства скругления рамки и формируем легкую тень. При наведении курсора мыши на кнопку будем изменять цвет фона.

Новые элементы HTML5 и новые API-интерфейсы JavaScript позволяют нам создавать сложные приложения для браузеров. Частью любого современного приложения являются различные диалоговые окна. Они предлагают пользователям подтвердить выполнение каких-либо действий или просто выдают сообщения. С новым элементом "" теперь мы можем создавать эти окна при помощи чистого HTML5.

Простая разметка без стилей

Элемент может быть размещен в любом месте внутри тега body на HTML-странице. Не рекомендуется размещать его в текстовых параграфах -

, так как это может привести к проблемам с отображением. Это, скорее всего, произойдет с элементами , которые содержат дополнительные элементы и не только текстовые. Определение свойства "open " покажет диалоговое окно при открытии страницы. Без этого свойства окно будет в первоначальном виде закрыто.

Пожалуйста, прочтите наши Условия предоставления услуг .

Условия предоставления услуг …

…

В нашем примере мы определили диалоговое окно между двумя параграфами. Такое положение элемента гарантирует, что он будет показан горизонтально по центру, не принимая во внимание поток других элементов. Вертикально оно вычисляет свою позицию относительно верхней границы окна браузера. Если вас это устраивает, то использование CSS не требуется.

Если стандартное представление не для вас, добавьте свои собственные стили и настройте его по своему вкусу. Вы можете использовать любые свойства CSS, как для настройки блочных элементов - наиболее используемые "border-radius" и "shadow" для дополнительных эффектов.

Управление Dialog с помощью JavaScript

Чтобы открыть и закрыть элемент используйте методы JavaScript show() и close() .

document.getElementsByTagName ("span" ) [ 0 ] .addEventListener ("click" , function () {
document.getElementsByTagName ("dialog" ) [ 0 ] .show () ;
} , false ) ;

Document.getElementsByTagName ("dialog" ) [ 0 ] .addEventListener ("click" , function () {
this .close () ;
} , false ) ;

В нашем примере мы определяем два события. Первое событие приводит к открытию диалогового элемента при нажатии на первый элемент . При нажатии на открытое диалоговое окно оно будет закрыто.

Формы внутри элемента Dialog

Элемент способен содержать не только простой текст, но также дополнительные элементы. Это позволяет нам, например, разместить форму внутри диалогового окна. Имейте ввиду, что вместо обычных методов "post" и "get" вам нужно будет использовать специальный метод "dialog" для обработки содержимого формы.

Наши Условия предоставления услуг …

Принять
Отказаться

В этом примере мы создали форму с двумя кнопками внутри диалога. Нажатие любой из кнопок приводит к закрытию диалогового элемента. JavaScript здесь не требуется. Но если вы хотите предотвратить закрытие окна по клику, Вам все еще необходимо использовать JavaScript. Достаточно добавить событие "click " для кнопки, которое будет предотвращать действие кнопки по умолчанию с помощью "preventDefault()" .

Реакция на закрытие диалогового окна

Событие "close" позволяет нам реагировать на закрытие диалогового окна.

document.getElementsByTagName ("dialog" ) [ 0 ] .addEventListener ("close" , function (e) {
var answer = this .returnValue ;
} , false ) ;

Свойство "returnValue" возвращает "value" - значение кнопки, которая была использована, чтобы закрыть окно. Если в нашем примере была нажата кнопка "Отказаться" "ReturnValue" вернет значение "no" (value="no"). Это дает нам простой способ инициирования определенных функций в зависимости от нажатой кнопки.

Создание модального диалогового окна

Если вы хотите быть уверенным, что никакое другое содержимое вашей HTML-страницы не может быть доступно пока диалоговое окно открыто, то вы можете использовать модальные диалоговые окна. Они будут открыты только при помощи JavaScript и его метода "showModal() ". Модальные диалоги делают неактивным все другое содержимое. Вы не можете нажать, изменить, или выбрать неактивное содержимое.

document.getElementsByTagName ("dialog" ) [ 0 ] .showModal () ;

В отличие от стандартных диалоговых окон, модальный вариант будет отцентрирован не только по горизонтали, но и по вертикали.

Если вы хотите использовать другой цвет вы можете использовать псевдо-элемент "::backdrop ". Убедитесь, чтобы вы выбрали цвет с низким значением "RGBA() ", чтобы избежать полного сокрытия содержания.

dialog: :backdrop {
background : rgba(255 , 0 , 255 , 0.25 ) ;
}

В нашем примере мы решили использовать светло-желтый цвет. Если вы хотите, вы можете выбрать фоновое изображение вместо цвета.

Модальные диалоги всегда можно закрыть нажав клавишу ESC. Это делает необходимым добавить еще одно событие в диалоге. Как только событие "close" сработало, когда окно закрывается с помощью кнопки формы, убедитесь, чтобы вы добавили событие "cancel" . Оно будет срабатывать, как только модальное окно закроется при помощи клавиши ESC.

document.getElementsByTagName ("dialog" ) [ 0 ] .addEventListener ("cancel" , function (e) {
var answer = "cancelled" ;
} , false ) ;

Использование более одного элемента Dialog на странице

Если Вы имеете больше чем один открытый диалог в одно и тоже время, используйте стили чтобы убедиться, что они не перекрываются. Исключение для модальных окон, они всегда будут блокировать другое содержимое и, таким образом, не позволят использование более чем одного модального окна одновременно.

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

Поддержка элемента еще не достаточно распространена на момент написания этой статьи. Только Chrome и Safari интерпретируют элемент правильно. Все остальные браузеры рассматривают его как простой блочный элемент, что означает, что они всегда будут показывать его содержимое независимо от того установлено свойство "open" или нет. Текущее положение дел можно .

Если у Вас возникли вопросы, то для скорейшего получения ответа рекомендуем воспользоваться нашим

Элемент HTML5 dialog обеспечивает выполнение функции в диалоговом окне на веб-странице. Диалоговое окно элемента dialog находится в дереве DOM, и может быть оформлен с помощью обычных CSS.

Простые примеры элемента dialog Окно диалога! Сам по себе элемент dialog визуально ни чего не покажет, нужно использовать JavaScript API, чтобы открыть и закрыть диалоговое окно. .show() и.close() API С помощью.show() и.close() API для элемента dialog DOM, можно открыть и закрыть диалоговое окно.

Окно диалога!

Закрыть Open Dialog! var dialog = document.querySelector("dialog"); document.querySelector("#show").onclick = function() { dialog.show(); }; document.querySelector("#close").onclick = function() { dialog.close(); };

Окно диалога!

Закрыть Открыть диалоговое окно!

Стиль для диалогового окна Добавить произвольный стиль к элементу dialog, можно так же как и к другим элементам блока: nav, div, footer и т.д. dialog { border: 1px solid rgba(0, 0, 0, 0.3); border-radius: 6px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); }

Стили для элемента dialog так же легко как и для div !

Закрыть Открыть диалоговое окно со стилями

Функция.showModal() API

Что бы сделать диалоговое окно модальным, нужно вызвать функцию.showModal() вместо.show() . Заметьте, вы не можете выделить текст в фоновом режиме или нажать кнопку для выбора кнопок в открытом диалоговом окне.

Document.querySelector("#show").onclick = function() { dialog.showModal(); };

Этот слой поверх окон других элементов, независимо от значений z-index , в том числе ранее открытых модальных диалоговых окон.

При необходимости можно закрыть модальное диалоговое окно, с помощью ключа «escape»!

Закрыть

Добавление фона для диалогового окна

Что бы залить фон цветом, можно использовать псевдо-элемент::backdrop .

Dialog::backdrop { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8); }

Тусклый фон, с использованием::backdrop . Он выделяет диалоговое окно скрывая остальное!

Закрыть Открыть диалоговое окно с фоном

Возврат значений из диалогового окна

Вы можете передать аргумент для.close() . Диалоговое окно возвращает заданное значение свойства.returnValue .

Открыть диалог!

Отправить Открыть диалог! document.querySelector("#close").onclick = function() { var value = document.querySelector("#return_value").value; dialog.close(value); }; document.querySelector("dialog").addEventListener("close", function() { alert(this.returnValue); })

Диалоговое окно получает аргумент close(). Это будет отражено в.returnValue

Отправить Открыть диалог Преимущества элемента Конечно, можно использовать библиотеку jQuery или другие JavaScript для получения такого результата. Но dialog является элементом HTML и для него не нужно подключать сторонние библиотеки что бы сделать всплывающее диалоговое окно.

Элемент также отлично подходит для доступности. Браузер понимает, что элемент является модальным, поэтому технологий, такие как программы чтения с экрана знают, какой контент должен быть интерактивным.

Кроме того, модальные диалоги размещаются вполне упорядоченно в стек «верхний слой», и находится по верх других элементов, независимо от свойств z-index . Опираясь на z-index разместить модальный диалог на вершине веб-страниц, сложно.

Позиционировать

Диалоги имеют какое-то особые характеристики позиционирования. По умолчанию когда вы вызываете dialog.show() диалоговое окно располагается по центру окна просмотра. Конечно, вы можете изменить это, используя обычные позиционирование в CSS, например top: 15px .

И, еще нужно знать, что абсолютное позиционирование диалогового окна, только для блока содержащего начальный контейнер. Поэтому абсолютное позиционированное диалоговое окно не понимает такие вещи, как position, overflow, и проценты.

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

Открыть несколько окон диалога

Если диалоги не модальные, они ведут себя как несколько элементов . Для модальных браузер откладывает диалоговое окно в стек. Вершина стека является активно модальное диалоговое окно, которое блокирует остальные страницы документа. Всякий раз, когда модальное диалоговое окно открыто, оно помещается на вершину стека. Всякий раз, когда модальное диалоговое окно закрыто, оно удаляется из стека. Диалоги отображаются в порядке стека, поэтому активный диалог является самым высоким.

Элемент (от англ. 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 ) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.

Простое по функциям модальное окно, которое полностью выполнено на чистом CSS, где можно поставить под разные функций для вызова на сайте. Вероятно это одно из многих, что встречал из подборки модальных окно, в плане его простаты настройки, но, а также по установки. Но главное, это его функциональность, которое не будет уступать другим. Также оно по умолчанию сделано под светлый оттенок, где в правом верхнем углу установлена кнопка, виде крестика.

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

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

Это при проверке, что все отлично работает:

Приступаем к установке:

Окно с кнопкой

ZorNet.Ru - портал вебмастера×
Здесь будет находится контент по тематике для сайта.

CSS

Butksaton-satokavate {
display: inline-block;
text-decoration: none;
margin-right: 7px;
border-radius: 5px;
padding: 7px 9px;
background: #199a36;
color: #fbf7f7 !important;
}

Anelumen {
display: flex;
position: fixed;
left: 0;
top: -100%;
width: 100%;
height: 100%;
align-items: center;
justify-content: center;
opacity: 0;
-webkit-transition: top 0s .7s, opacity .7s 0s;
transition: top 0s .7s, opacity .7s 0s;
}

Anelumen:target {
top: 0;
opacity: 1;
-webkit-transition: none;
transition: none;
}

Anelumen figure {
width: 100%;
max-width: 530px;
position: relative;
padding: 1.8em;
opacity: 0;
background-color: white;
-webkit-transition: opacity .7s;
transition: opacity .7s;
}

Anelumen.lowingnuska figure {
background: #f9f5f5;
border-radius: 7px;
padding-top: 8px;
border: 3px solid #aaabad;
}

Anelumen.lowingnuska figure h2 {
margin-top: 0;
padding-bottom: 3px;
border-bottom: 1px solid #dcd7d7;
}

Anelumen:target figure {
opacity: 1;
}

Anelumen.lowingnuska .compatibg-ukastywise {
text-decoration: none;
position: absolute;
right: 8px;
top: 0px;
font-size: 41px;
}

Anelumen .nedismiseg {
left: 0;
top: 0;
width: 100%;
height: 100%;
position: fixed;
background-color: rgba(10, 10, 10, 0.87);
content: "";
cursor: default;
visibility: hidden;
-webkit-transition: all .7s;
transition: all .7s;
}

Anelumen:target .nedismiseg {
visibility: visible;
}

Также нужно знать, что стилистика CSS и псевдокласс, это одна из тех которых не полностью используются по функций CSS с множеством интересных потенциальных приложений.

Он запускается когда URL адрес страницы соответствует идентификатору своему элементу или можно высказать по другому, это когда пользователь перескакивает на определенный элемент на странице.