Меню
ГлавнаяExcel

Пример создание диалогового окна в html. Всплывающие и модальные окна с помощью HTML5 элемента "dialog". Взаимодействие с HTMLDialogElement

Простое по функциям модальное окно, которое полностью выполнено на чистом 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 адрес страницы соответствует идентификатору своему элементу или можно высказать по другому, это когда пользователь перескакивает на определенный элемент на странице.

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

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

Ранее для создания диалоговых окон требовалось подключить 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" ) ;

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

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

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