Диалозите и модалите са неразделна част от повечето уеб приложения. Въпреки че изграждането им на ръка не е сложна задача, тя бързо става досадна за всеки уеб разработчик. Обичайната алтернатива за изграждането им на ръка е използването на компонент, създаден от някой друг.

Има обаче няколко проблема с този подход. Има толкова много опции, че става трудно да се разбере кой компонент би бил най-добре да се използва и персонализирането на външния вид на такива компоненти понякога може да бъде също толкова досадно, колкото и изграждането на диалог на ръка. За щастие има друга алтернатива: HTML диалоговият елемент.

Какво представлява диалоговият елемент?

HTML диалоговият елемент е вграден HTML маркер (като div или span), който позволява на разработчиците да създават персонализирани диалози и модали. Диалоговият елемент съществува в Chrome и Opera от 2014 г., но едва наскоро се поддържа от всички основни браузъри.

Защо да използвате диалоговия елемент?

Основната причина да използвате диалоговия елемент е удобството. Това улеснява изграждането на диалози, които могат да се появяват вградени или да се показват като модални, с нищо повече от един HTML маркер и няколко реда JavaScript.

instagram viewer

Диалоговият елемент премахва необходимостта от изграждане и отстраняване на грешки в персонализиран диалогов прозорец или импортиране на нечий друг компонент. Също така е много лесно да се стилизира с CSS.

Поддръжка на браузъра за диалоговия елемент

За съжаление поддръжката на браузъра за диалоговия елемент може да е по-добра. Поддържа се в най-новите версии на всички основни браузъри от март 2022 г., с някои предупреждения.

Всеки браузър Firefox, по-стар от Firefox 98, ще го поддържа само ако е активиран ръчно в настройките на браузъра, а всяка версия на Safari по-стара от Safari 15.4 изобщо не го поддържа. Пълните подробности за поддръжка на браузъра са достъпни на caniuse.

За щастие, това не означава, че диалоговият елемент е неизползваем. Екипът на Google Chrome поддържа полифил, на който можете да намерите Github за диалоговия елемент, който осигурява поддръжка за него дори в браузъри, където не се поддържа първоначално.

В настоящата си форма диалоговият елемент може да има проблеми с достъпността, така че може да е по-подходящо да използвате персонализиран диалогов компонент като a11y-диалог в производствени приложения.

Как да използвате диалоговия елемент

За да демонстрирате как да използвате диалоговия елемент, ще го използвате, за да създадете обща функция на уебсайта: модален потвърждение за бутон за изтриване.

Всичко, което е необходимо да следвате, е един HTML файл.

1. Настройте HTML файла

Започнете със създаване на споменатия файл и именуване на index.html.

След това установете структурата на HTML файла и предоставете основна мета-информация за страницата, така че да се изобразява правилно на всички устройства.

Въведете следния код в index.html:

<!DOCTYPE html>
<html lang="en">
<глава>
<мета charset="UTF-8">
<мета http-equiv="X-UA-съвместим" съдържание="IE=ръб">
<мета име="изглед" съдържание="ширина=ширина на устройството, начален мащаб=1.0">
<заглавие>Демо на диалога</title>
</head>
<стил></style>


<тяло></body>
<скрипт></script>
</html>

Това е цялата настройка, необходима за този проект.

2. Писане на маркировка

След това напишете маркирането за бутона за изтриване, както и диалоговия елемент.

Въведете следния код в етикета body на index.html:

<div клас="бутон-контейнер">
<бутон>
Изтрий вещ
</button>
</div>
<диалогов прозорец>
<раздел>
 Сигурен ли си, че искаш да Изтрийтова вещ?
</div>
<раздел>
<бутон клас="близо">
 да
</button>
<бутон клас="близо">
 Не
</button>
</div>
</dialog>

HTML по-горе ще създаде:

  • Бутон за изтриване.
  • Елементът на диалога.
  • Два бутона в диалоговия прозорец.

Ако index.html е отворен във вашия браузър, единственият видим елемент на екрана ще бъде бутонът за изтриване. Това не означава, че има нещо нередно, диалоговият елемент просто изисква малко JavaScript, за да стане видим.

3. Добавяне на JavaScript

Сега напишете кода, който ще отвори диалоговия прозорец, когато потребителят щракне върху бутона за изтриване, както и кода, който позволява на диалоговия прозорец да се затвори.

Въведете следното в маркера на скрипта на index.html:

const модален = документ.querySelector("диалог")
document.querySelector("бутон .button-container").addEventListener("щракнете", () => {
модална.showModal();
});
const closeBtns = документ.getElementsByClassName("затвори");
за (btn от closeBtns) {
 btn.addEventListener("щракнете", () => {
модална.близо();
 })
}

Този код използва метода querySelector за да получите препратки към бутоните и диалоговия прозорец. След това прикачва слушател на събитие за щракване към всеки бутон.

Може да сте запознати с слушатели на събития в JavaScript, които можете да използвате сами. Слушателят на събития, прикрепен към бутона за изтриване, извиква метода showModal(), за да покаже диалоговия прозорец, когато се щракне върху бутона.

Всеки бутон вътре в модала има прикачен към него слушател на събитие, който използва метода close(), за да скрие диалоговия прозорец, когато се щракне.

Дори ако няма JavaScript, който извиква метода close() в кода, потребителите могат също да затворят модалния, като натиснат клавиша за излизане на клавиатурата си.

Сега, когато този JavaScript е на мястото си, ако потребителят щракне върху бутона за изтриване, модалната програма ще се отвори и щракването върху бутона да или не ще затвори модала.

Ето как трябва да изглежда отвореният модал:

Едно нещо, което трябва да се отбележи, е, че диалоговият елемент вече идва с някакъв стил, въпреки че няма CSS в index.html. Модалният вече е центриран, има граница, ширината е ограничена до съдържанието и има някои подразбирания.

Потребителите не могат да взаимодействат (щракват, избират) с нищо във фонов режим, докато модалът е отворен.

Диалоговият елемент може също да се показва като част от потока на страницата, вместо като модален. За да го изпробвате, променете първия слушател на събитие в JavaScript така:

document.querySelector("бутон .button-container").addEventListener("щракнете", () => { modal.show(); });

Единственото нещо, което се промени в този код, е, че кодът извиква метода show() вместо метода showModal(). Сега, когато потребителят щракне върху бутона за изтриване на елемент, модалът трябва да се отвори на линия по следния начин:

4. Добавете стил

След това персонализирайте външния вид на диалоговия прозорец и неговия фон, като напишете CSS.

CSS ще намали границата на диалоговия прозорец, ще ограничи максималната му ширина и след това ще потъмни фона, както и ще добави малко стилизиране към бутоните.

Оформянето на стила на самия диалог е лесно, но псевдокласът backdrop е необходим за добавяне на стил, насочен към фона на диалоговия прозорец.

Поставете следния код в етикета style на index.html:

диалогов прозорец:: фон {
 фон: черен;
непрозрачност: 0.5;
}
бутон {
 радиус на границата: 2px;
 цвят на фона: бял;
 граница: 1px плътно черно;
 поле: 5px;
 кутия-сянка: 1px 1px 2px сиво;
}
диалогов прозорец {
 максимална ширина: 90vw;
 граница: 1px плътно черно;
}

Когато диалоговият прозорец е отворен, той трябва да изглежда така:

И сте изградили напълно функционален диалогов прозорец.

Диалоговият елемент е чудесен начин за изграждане на модали

Използвайки диалоговия елемент HTML, който наскоро получи поддръжка във всички основни браузъри, уеб разработчиците вече могат да създават напълно функционални, лесно персонализирани модали и диалози с един HTML таг и няколко реда JavaScript и без да е необходимо да разчитате на трета страна решение.

Диалоговият елемент има полифил, поддържан от екипа на Google Chrome, който позволява на разработчиците да използват диалогов прозорец във версии на браузъра, които не го поддържат.