Многие процессы в вебе на сегодняшний день требуют согласия пользователя для своего завершения. Например, пользователям может понадобиться удалить аккаунт, сменить имя или подтвердить денежную операцию.
Общий подход в таких случаях - показ диалогового окна обычно с двумя кнопками; одна для отмены, другая для выполнени действия. Вот уже на протяжении многих лет для этого , однако в этом уроке собираемся сделать это нативными средствами при помощи экспериментального тега .
Использование элемента 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 для симуляции подобного поведения в браузерах, которые этого еще не поддерживают.
Элемент (от англ. 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. Вид диалогового окна
СпецификацияКаждая спецификация проходит несколько стадий одобрения.
Особняком стоит живой стандарт HTML (Living ) - он не придерживается традиционной нумерации версий, поскольку находится в постоянной разработке и обновляется регулярно.
Элемент 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.
Открыть несколько окон диалогаЕсли диалоги не модальные, они ведут себя как несколько элементов . Для модальных браузер откладывает диалоговое окно в стек. Вершина стека является активно модальное диалоговое окно, которое блокирует остальные страницы документа. Всякий раз, когда модальное диалоговое окно открыто, оно помещается на вершину стека. Всякий раз, когда модальное диалоговое окно закрыто, оно удаляется из стека. Диалоги отображаются в порядке стека, поэтому активный диалог является самым высоким.
Очень часто для ввода каких-либо данных в Windows-приложениях применяются диалоговые окна. Эти окна содержат элементы управления, в которых и вводятся требуемые приложением данные, и кнопки ОК и Отмена , первая из которых подтверждает ввод данных, а вторая - отменяет.
Диалоговые окна бывают двух видов:
Internet Explorer позволяет нам использовать в HTML-приложениях как модальные, так и немодальные диалоговое окна. Сейчас мы рассмотрим, как это делается.
Примечание:
Перед чтением этой статьи настоятельно рекомендуется ознакомиться с предыдущими тремя статьями цикла, посвящённого HTML-приложениям Internet Explorer.
1. Готовим тестовое HTML-приложение
Давайте создадим простейшее HTML-приложение текстового редактора без всяких "наворотов". Оно будет содержать большую область редактирования, где, собственно, и вводится текст, и кнопку Параметры
, при нажатии которой будет выводиться диалоговое окно ввода параметров.
Набор параметров, которые пользователь может указать, у нас будет небольшим. Это, прежде всего, функция переноса текста в области редактирования - будет ли она включена или отключена. И цвет текста; пусть пользователь получит возможность выбирать между чёрным, синим, зелёным и красным цветом.
Мы реализуем это приложение в двух версиях: первая будет использовать для ввода параметров модальное диалоговое окно, а вторая - немодальное.
HTML-код приложения приведён ниже.
Текстовый редактор
window.resizeTo(710, 490);
Сохраним это приложение в двух файлах: Textedit_modal.hta (версия с модальным диалоговым окном) и Textedit_modeless.hta (версия с немодальным диалоговым окном). И приступим...
2. Как реализуются диалоговые окна
Но сначала - небольшой теоретический курс. Прежде всего, содержимое любого диалогового окна - и модального, и немодального - реализуется в виде обычной веб-страницы. Эта веб-страница сохраняется в отдельном файле с расширением htm или html (как и содержимое отдельных "окон" приложения, о создании которых рассказывалось во второй статье цикла).
При открытии модального диалогового окна мы можем передать ему некоторые данные (об этом - далее). Это могут быть, скажем, текущие значения параметров приложения, которые потом будут подставлены в элементы управления диалогового окна.
При закрытии модального диалогового окна мы можем передать какие-либо данные окну, которое его открыло. В случае диалогового окна настроек это могут быть значения параметров, введённые пользователем.
При открытии немодального диалогового окна мы не можем передать ему никаких данных, а также не можем вернуть введённые в него данные окну, которое его открыло. Однако мы можем получить доступ к этому окну из окна, которое его открыло, и, наоборот, "добраться" из диалогового окна к окну, что его открыло. Этим мы можем воспользоваться для обмена данными между окнами и выполнения действий над содержимым одного окна из другого.
Вот пока и всё. Займёмся практикой. А остальные теоретические вопросы рассмотрим по ходу дела.
3. Реализация модальных диалоговых окон
Начнём с реализации модальных диалоговых окон как наиболее часто используемых.
3.1. Открытие модального диалогового окна
Мы только что узнали, что содержимое диалогового окна реализуется в виде обычной веб-страницы. Создать веб-страницу для нас труда не составит. Но как открыть само диалоговое окно?
Для открытия модального диалогового окна применяется метод showModalDialog объекта Window. Формат вызова этого метода таков:
.showModalDialog(
[,
[,
]]
);
Первый параметр этого метода является обязательным. Он задаёт интернет-адрес веб-страницы, реализующей содержимое диалогового окна, в виде строки.
Window.showModalDialog("options_modal.html");
Второй параметр необязателен. Он задаёт значение, которое будет передано диалоговому окну. (Как получить это значение в диалоговом окне, мы рассмотрим потом.) Передаваемое значение может быть любого типа: строка, число, логическое значение, массив, функция или экземпляр любого объекта.
Здесь мы передали диалоговому окну число 2.
Третий, также необязательный, параметр указывает параметры самого диалогового окна. Он должен представлять собой строку, содержащую наименования параметров и их значения. Наименование параметра отделяется от значения двоеточием, а отдельные параметры друг от друга - точкой с запятой (как и в случае написания стилей CSS).
"dialogHeight:300px;dialogWidth:400px");
Здесь мы указали параметры открываемого диалогового окна - высоту (300 пикселов) и ширину (400 пикселов).
Список параметров диалоговых окон, поддерживаемых Internet Explorer, довольно велик. Давайте их рассмотрим.
Примечание:
Если указать координаты диалогового окна с помощью параметров dialogHeight и dialogWidth, то диалоговое окно будет располагаться в указанном месте экрана независимо от значения параметра center. Или, другими словами, параметры dialogHeight и dialogWidth имеют больший приоритет.
Window.showModalDialog("options_modal.html", 2,
"dialogHeight:300px;dialogWidth:400px;scroll:no");
После вызова метода showModalDialog выполнение веб-сценария останавливается, пока диалоговое окно не будет закрыто. Выполнение будет продолжено только после закрытия окна.
Осталось сказать о результате, который возвращает метод showModalDialog. Это значение, которое было передано диалоговым окном окну, что его открыло. Это значение может быть любого типа: строка, число, логическое значение, массив, функция или экземпляр любого объекта.
Примечание:
Вызов метода showModalDialog может присутствовать только в обработчиках событий, возникающих вследствии действий пользователя (например, события click - щелчок мышью). В противном случае вызов этого метода будет проигнорирован.
3.2. Передача модальному диалоговому окну каких-либо данных при его открытии
Очень часто приходится передавать открываемому модальному диалоговому окну какие-либо данные. Например, это могут быть текущие значения параметров, которые следует подставить в элементы управления данного окна.
Мы уже знаем, что можем передать модальному диалоговому окну значение любого типа, подставив его вторым параметром в вызов метода showModalDialog.
Window.showModalDialog("options_modal.html", 2);
Но что делать, если нам требуется передать в диалоговое окно несколько значений? Существует два способа сделать это.
Способ первый - создать массив и поместить значения, которые следует передать, в его элементы.
Var aParams = true;
var aParams = "black";
Здесь мы создали обычный массив aParams с двумя элементами, которым присвоили значения, передаваемые диалоговому окну.
Мы можем создать и ассоциативный массив (хэш):
Var aParams["wrap"] = true;
var aParams["color"] = "black";
window.showModalDialog("options_modal.html", aParams);
Пожалуй, так удобнее - строковые индексы хэша запомнить проще, чем числовые индексы обычного массива.
Способ второй - создать экземпляр объекта Object, воспользовавшись инициализатором JavaScript, создать в нём свойства, которым и присвоить передаваемые значения.
Var oParams = { wrap: true, color: "black" };
window.showModalDialog("options_modal.html", oParams);
Какой способ выбрать - дело вкуса. Например, автор предпочитает экземпляры объекта Object, читая их самыми подходящими для этой цели. А кому-то может показаться более удобными массивы - обычные или хэши.
3.3. Получение в модальном диалоговом окне данных, переданных окном, которое его открыло
Так, данные модальному окну мы передали. Теперь их нам нужно как-то их получить в самом этом окне.
Объект Window поддерживает доступное только для чтения свойство dialogArguments. Оно хранит значение, которое было передано диалоговому окну вторым параметром метода showModalDialog. То, что нам нужно.
Примечание:
Свойство dialogArguments доступно только в диалоговых окнах.
Вот так мы можем получить значения, переданные как элементы хэша:
Var aParams = window.dialogArguments;
var bWrap = aParams["wrap"];
var sColor = aParams["color"];
А так - значения, переданные как свойства экземпляра объекта Object:
Var oParams = window.dialogArguments;
var bWrap = oParams.wrap;
var sColor = oParams.color;
3.4. Передача данных из модального диалогового окна в окно, которое его открыло
Осталось выяснить, как выполнить передачу данных в обратном направлении - из модального диалогового окна в окно, которое его открыло. Нам ведь придётся возвращать из диалогового окна параметров новые их значения, заданные пользователем, не так ли?
Какое-либо значение передавать из диалогового окна окну, которое его открыло, следует только в том случае, если пользователь нажал кнопку ОК . В случае нажатия кнопки Отмена этого делать обычно не нужно; вообще, кнопка Отмена должна только закрывать диалоговое окно, не выполняя никаких прочих действий.
Итак, пользователь нажал в диалоговом окне кнопку ОК . Теперь нам нужно передать какие-то данные окну, из которого было открыто диалоговое окно. Как это сделать?
Объект Window поддерживает свойство returnValue. В этом свойстве сохраняется значение, которое должно быть передано из модального диалогового окна в окно, что его открыло. Значение это может быть любого типа.
Примечание:
Свойство returnValue доступно только в модальных диалоговых окнах.
Например, так мы можем передать из открывшему окну одно-единственное значение:
Window.returnValue = 2;
А так - несколько значений:
Window.returnValue = { wrap: bWrap, color: sColor };
Разумеется, в этом случае мы также можем использовать обычный массив или хэш.
Если же пользователь нажал в диалоговом окне кнопку Отмена , мы, как условились ранее, не будем присваивать свойству returnValue никакого значения. В таком случае данное свойство получит своё значение по умолчанию - null. Кстати, то же самое случится, если пользователь закроет диалоговое окно нажатием кнопки закрытия или комбинации клавиш +.
Хорошо! Диалоговое окно закрыто (как его закрыть, мы узнаем потом). Теперь окно, которое его открыло, должно получить значение свойства returnValue. Как?
Очень просто. Значение свойства returnValue будет возвращено методом showModalDialog в качестве результата. Впрочем, это уже говорилось в параграфе 2.1.
Мы должны проверить, равно ли это значение null. Если это так, значит, никаких данных диалоговое окно не передало. В противном случае мы сможем как-то использовать переданные им данные в приложении.
Var oResult = window.showModalDialog(. . .);
if (oResult != null) {
var bResultWrap = oResult.wrap;
var sResultColor = oResult.color;
}
3.5. Закрытие модального диалогового окна
Напоследок нам следует собственно закрыть модальное диалоговое окно. Для этого мы можем использовать не принимающий параметров и не возвращающий результата метод close объекта Window.
Window.close();
3.6. HTML-приложение с поддержкой модальных диалоговых окон
Что ж, настала пора чистой практики. Доделаем наше HTML-приложение текстового редактора, чтобы оно поддерживало задание параметров с помощью модального диалогового окна.
Код самого HTML-приложения (файл Textedit_modal.hta) после исправлений станет таким:
Текстовый редактор
window.resizeTo(710, 490);
Var bWrap = true;
var sColor = "black";
Function showParameters()
{
var oParams = { wrap: bWrap, color: sColor };
var oResult = window.showModalDialog("options_modal.html", oParams,
"dialogHeight:120px;dialogWidth:200px;scroll:no");
if (oResult != null) {
bWrap = oResult.wrap;
sColor = oResult.color;
var oTxtText = document.getElementById("txtText");
oTxtText.wrap = bWrap ? "soft" : "off";
oTxtText.style.color = sColor;
}
}
Здесь, в принципе, нас всё уже знакомо. Требуются только минимальные пояснения.
Прежде всего, мы объявили две переменные - bWrap и sColor, - которые будут хранить текущие значения параметров приложения. Первая переменная будет хранить логическую величину - признак того, выполняется ли в области редактирования в данный момент перенос строк. А вторая переменная будет хранить текущее значение цвета текста в области редактирования в виде строки.
Примечание:
Вообще, текущие значения параметров можно вообще нигде не хранить, а каждый раз получать из соответствующих свойств экземпляра объекта HTMLTextAreaElement, представляющего область редактирования, где вводится текст. Просто автор решил не переусложнять код приложения.
Область редактирования представляется экземпляром объекта HTMLTextAreaElement. Этот объект поддерживает свойство wrap, задающее режим переноса строк. Значение "soft" этого свойства указывает области редактирования выполнять перенос строк, причём в местах переноса не будут вставляться символы возврата каретки и перевода строки ("мягкий" перенос строк). А значение "off" указывает области редактирования вообще не выполнять перенос строк.
Все объекты, представляющие элементы веб-страницы, поддерживают свойство style. Это свойство хранит экземпляр объекта CSSStyle, представляющий текущий стиль CSS, который привязан к данному элементу веб-страницы.
Объект CSSStyle, в свою очередь, поддерживает множество свойств, соответствующих различным атрибутам стиля. Так, свойство color соответствует одноимённому атрибуту стиля, задающему цвет текста.
Теперь создадим веб-страницу, реализующую само диалоговое окно. Поместим на ней флажок Перенос текста , раскрывающийся список Цвет текста и, разумеется, обязательные для окон подобного плана кнопки ОК и Отмена .
Код этой веб-страницы приведён ниже.
Параметры
function setup()
{
var oParams = window.dialogArguments;
OChkWrap.checked = oParams.wrap;
oSelColor.value = oParams.color;
}
Function sendParams()
{
var oChkWrap = document.getElementById("chkWrap");
var oSelColor = document.getElementById("selColor");
window.returnValue = { wrap: oChkWrap.checked, color: oSelColor.value };
window.close();
}
Перенос текста
Цвет текста
Чёрный
Красный
Зелёный
Синий
Атрибут SIZE тега , создающего список, задаёт размер данного списка в пунктах. Значение 1 этого атрибута тега указывает, что список должен иметь высоту в один пункт, то есть это должен быть раскрывающийся список.
Атрибут VALUE тега , создающего отдельный пункт списка, задаёт значение этого пункта.
Сразу после окончания загрузки веб-страницы, реализующей диалоговое окно, возникнет событие load. В качестве обработчика этого события мы указали функцию setup. Эта функция получит значение, переданное диалоговому окну от окна, что его открыло, - экземпляр объекта Object со свойствами, хранящими текущие значения параметров приложения. После этого она занесёт эти значения в соответствующие им элементы управления.
Объект HTMLInputElement, представляющий элемент управления, в том числе и флажок, поддерживает свойство checked, доступное только для флажков. Это свойство указывает состояние флажка: установлен ли он (значение true) или сброшен (значение false).
Объект HTMLSelectElement, представляющий список, поддерживает свойство value. Оно содержит значение пункта списка, который выбран в данный момент, в виде строки. Присвоив этому свойству какое-либо значение, мы укажем списку изначально выбрать пункт с этим значением.
При щелчке на кнопке ОК выполнится обработчик её события click - функция sendParams. Она создаст экземпляр объекта Object с помощью инициализатора JavaScript, занесёт в его свойства значения, заданные пользователем в элементах управления диалогового окна, - они станут новыми значениями параметров приложения. Полученный экземпляр объекта она передаст окну, которое открыло это диалоговое окно, то есть самому приложению, после чего закроет диалоговое окно.
Кнопка Отмена просто закрывает диалоговое окно. В результате окну, которое открыло это диалоговое окно, будет передано значение null - сигнал, что пользователь не подтвердил ввода новых параметров приложения.
Сохраним эту веб-страницу в файле options_modal.html. И проверим готовое HTML-приложение в действии.
Простое по функциям модальное окно, которое полностью выполнено на чистом CSS, где можно поставить под разные функций для вызова на сайте. Вероятно это одно из многих, что встречал из подборки модальных окно, в плане его простаты настройки, но, а также по установки. Но главное, это его функциональность, которое не будет уступать другим. Также оно по умолчанию сделано под светлый оттенок, где в правом верхнем углу установлена кнопка, виде крестика.Которое будет идти на функцию отключение или просто, чтоб каркас исчез, где даже на этом небольшом элементе есть эффект по смене палитры цвета. Теперь веб мастер можно поставить его на сайт и разместить в нем описание или операторы, что могут выводить разные категорий, как статистика или информер.
Но дело в том, если у вас темный стиль ресурса, то в стилистике можно быстро изменить гамму, а точнее подогнать под оригинальный дизайн. Здесь представлен один из стандартных методов как нужно сделать чистые CSS на модальное окно, что будет запускаться при нажатии на кнопку под ссылкой с привязкой HTML. Сама кнопка идет больше для видимости, где в стилях убрав один класс и останется название, что можно поставить как в навигацию или в панель управление, где находится основной функционал или навигация сайта.
Это при проверке, что все отлично работает:
Приступаем к установке:
Окно с кнопкой
ZorNet.Ru - портал вебмастера×
Здесь будет находится контент по тематике для сайта.
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;
}
Он запускается когда URL адрес страницы соответствует идентификатору своему элементу или можно высказать по другому, это когда пользователь перескакивает на определенный элемент на странице.
