Crearea ferestrelor de dialog HTML5 native

Fereastra de dialog este unul dintre elementele cele mai frecvent utilizate în designul interfeței cu utilizatorul unui site web. Este folosit în mai multe scopuri, inclusiv afișarea notificărilor, purtarea unui formular de abonare, alertarea erorilor/avertismentelor și atragerea atenției vizitatorului asupra informațiilor vitale. Când ferestrele de dialog sunt proiectate eficient și utilizate corect, ele pot ușura sarcina utilizatorului.

Anterior, crearea unei ferestre de dialog presupunea să utilizați un plugin jQuery precum Pop Easy, jQuery UI Dialog sau Twitter Bootstrap Modal. Dar acum, odată cu introducerea noului element <dialog> al HTML5, a devenit mult mai ușor pentru dezvoltatori să creeze dialoguri pop-up și modal pe o pagină web.

Inițial, eticheta <dialog> a intrat în specificația HTML5 ca o soluție excelentă pentru marcarea conversațiilor, dar a fost eliminată din specificația HTML5 în 2009. Cu toate acestea, a revenit din nou într-o formă nouă.

În această postare, vă voi ghida prin elementul <dialog> și vă voi arăta cum puteți profita la maximum de el. Sa incepem!

Dacă doriți să vedeți elementul <dialog> în acțiune sau să vă jucați cu codul, vedeți demonstrația live aici.

Suport pentru browser pentru elementul <dialog>

Din păcate, suportul pentru browser pentru <dialog> este limitat pentru moment. În prezent, elementul este acceptat numai în Safari 6.0 și Chrome Canary. Chiar dacă Chrome Canary acceptă pe deplin eticheta, trebuie să activați un semnalizator pentru ao folosi. Accesați chrome://flags și activați marcajul „Activați funcțiile experimentale ale platformei web” .

După activarea steagului, trebuie să relansați browserul pentru ca modificările să intre în vigoare.

Interfața HTMLDialogElement

Interfața HTMLDialogElement , care este inclusă în specificațiile HTML pentru elementul <dialog> , are numeroase proprietăți și metode pe care le puteți utiliza pentru a face dialogurile să apară și să dispară. Acestea sunt după cum urmează:

Metode:

Interfața HTMLDialogElement are trei metode pentru deschiderea și închiderea dialogurilor.

• show() : Această metodă este folosită pentru a afișa un dialog. Utilizatorii pot accesa în continuare alte conținuturi ale documentului HTML atâta timp cât o casetă de dialog este deschisă.
• showModal() : Folosit pentru a lansa un „dialog modal” , care împiedică un utilizator să acceseze orice altceva în afară de fereastra de dialog dintr-o pagină web.
• close() : Folosit pentru a închide un dialog. Puteți trece returnValue ca parametru opțional care va actualiza proprietatea returnValue .

Proprietăți:

Există două proprietăți incluse în interfața HTMLDialogElement .

• returnValue : Preia parametrul care a fost transmis opțional în close() .
• open : această proprietate este o valoare booleană. Dacă este true , dialogul va fi vizibil pentru utilizator. În caz contrar, va fi ascuns.

Evenimente:

Când un dialog este închis, va fi declanșat un eveniment de close .

 dialog.addEventListener('close', function() {
Alt cod va intra aici...
});

Pe lângă aceste metode și proprietăți cheie, elementul <dialog> acceptă și:

• form[method="dialog"] : Folosit pentru a integra un formular cu un <dialog> . Valabil doar în interiorul unui dialog.
• autofocus attribute : Folosit pentru a focaliza un control de formular în interiorul unui dialog.
• cancel event : un eveniment de cancel este declanșat atunci când un dialog modal este închis prin „Esc”

Acum, după ce am înțeles elementele de bază ale elementului <dialog> , să trecem la practică cu câteva exemple.

Crearea unui dialog

În primul rând, vă voi arăta cum să creați un dialog simplu. Codul de mai jos definește un element <dialog> simplu cu un anumit conținut, un buton de închidere pentru a ascunde dialogul și un buton de afișare pentru a lansa dialogul.

Bun venit la Responsive Junction!
Faceți site-ul dvs. existent să fie receptiv
Ieșire

Afișează Dialog

Când testați codul de mai sus în browser, nu veți vedea nimic în afară de butonul „Afișați dialogul” fără nicio funcționalitate, așa cum se arată în captura de ecran de mai jos:

Pentru a deschide și închide elementul <dialog> , trebuie să utilizați JavaScript .show() și .close() .

 (funcție() {  
 	var dialog = document.getElementById('Dialog');
document.getElementById('showDialog').onclick = function() {  
dialog.show();  
};  
document.getElementById('closeDialog').onclick = function() {  
dialog.close();  
};
})();

Acum, dacă faceți clic pe butonul „Afișați dialogul” , puteți vedea fereastra de dialog în browser. Făcând clic pe „Ieșire” se va închide fereastra de dialog. Iată captura de ecran:

Adăugarea stilului la dialog

Puteți adăuga stiluri CSS la dialogul dvs. așa cum ați face cu orice alt element. În mod implicit, fereastra de dialog va fi afișată centrat orizontal în timp ce se suprapune alte elemente. Dacă vă simțiți confortabil cu poziția implicită și arătați, nu mai este nevoie de CSS. În caz contrar, puteți adăuga propriul CSS pentru a se potrivi și a proiecta fereastra de dialog după gust, așa cum am făcut mai jos:

 dialog {
sus: 28%;
latime: 400px;  
chenar: 1px rgba solid (0, 0, 0, 0,3);
chenar-rază: 15px;
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
chenar-sus: 5px solid #eb9816;
}
buton{
display: inline-block;
chenar-rază: 3px;
chenar: niciunul;
dimensiunea fontului: 0.9rem;
umplutură: 0,4rem 0,8em;
fundal: #eb9816;
chenar-jos: 1px solid #f1b75c;
culoare albă;
greutatea fontului: bold;
marja: 0 0,25rem;
text-align: centru;
}
butonul:hover, button:focus {
opacitate: 0,92;
cursor: pointer;
}

Crearea unui dialog modal

Dacă doriți să împiedicați utilizatorii dvs. să acceseze conținutul HTML, puteți utiliza ferestrele de dialog modale. Pe măsură ce fereastra de dialog modală afișează toate celelalte lucruri în afară de dialog, utilizatorii nu vor putea selecta textul gri sau face clic pentru a selecta butoanele în timp ce fereastra de dialog este deschisă.

Crearea modalelor este similară cu crearea dialogurilor, cu singura diferență de a folosi .showModal() în loc de .show() . Nu este nevoie să faceți nicio modificare în codul HTML.

(funcție() {  
 	var dialog = document.getElementById('Dialog');
document.getElementById('showDialog').onclick = function() {  
dialog. showModal(); 
};  
document.getElementById('closeDialog').onclick = function() {  
dialog.close();  
};
})();

În timp ce dialogurile implicite sunt afișate centrat orizontal, dialogurile modale sunt afișate atât pe verticală, cât și pe orizontală centrate în fereastra de vizualizare. De asemenea, puteți închide un dialog modal apăsând tasta „Escape” .

Adăugarea culorii de fundal a dialogului modal

Elementul <dialog> prezintă un pseudo-element numit "::backdrop" , care funcționează numai cu dialoguri modale. Folosind acest element, puteți estompa pagina principală pentru a comunica utilizatorilor că nu este accesibilă. Puteți poziționa și stila un fundal profitând de proprietățile CSS standard:

 dialog::fond{
poziție: fixă;
sus: 0;
stânga: 0;
dreapta: 0;
jos: 0;
culoare de fundal: rgba(0, 0, 0, 0.7);
}

Implementarea <dialog> cu un Formular

Un formular poate fi integrat cu un element <dialog> folosind form method="dialog" . La trimiterea formularului, fereastra de dialog se va închide și va returna valoarea butonului de trimitere prin proprietatea dialog.returnValue .

Iată codul HTML pentru dialogul formular:

Sunteți de acord cu termenii de utilizare?
Introduceți textul dvs. aici!

da
Nu


Deschideți Dialogul Formular

Utilizați următorul JavaScript pentru dialogul formular.

var formDialog = document.getElementById('formDialog');
document.getElementById('showformDialog').onclick = function() {  
formDialog.showModal();  
};
document.getElementById('submit').onclick = function() {
formDialog.close(valoare);
};
document.getElementById('formDialog').addEventListener('close', function() {
alert(formDialog.returnValue);
});

Notă : Pentru o mai bună înțelegere, folosesc formDialog în loc de Dialog din demonstrația mea.

Dacă doriți să vedeți elementul <dialog> în acțiune sau să vă jucați cu codul, vedeți demonstrația live aici.

Concluzie

Odată cu reîncarnarea elementului <dialog> , a devenit mult mai ușor pentru dezvoltatori să creeze dialoguri fără a utiliza un plugin jQuery. Chiar dacă Chrome Canary și Safari 6.0 interpretează corect elementul <dialog> , există un polyfill disponibil pentru a vă asigura că alte browsere vor accepta elementul.

Dacă doriți să aflați despre alte proprietăți HTML5, vă recomandăm să consultați Noțiuni de bază cu API-ul fișierelor HTML5 sau poate doriți să aflați despre atributul Meniul contextual HTML5.