Un exemplu de creare a unei casete de dialog în html. Aplicații HTML: Utilizarea casetelor de dialog (Partea 1). Casete de dialog Stilare

O fereastră modală care este simplă în funcție, care este complet realizată în CSS pur, unde puteți pune sub diferite funcții pentru a suna pe site. Acesta este probabil unul dintre multele pe care le-am întâlnit dintr-o selecție de ferestre modale, din punct de vedere al setărilor sale, dar și din punct de vedere al instalării. Dar principalul lucru este funcționalitatea sa, care nu va fi inferioară altora. De asemenea, implicit este realizat într-o nuanță deschisă, unde în dreapta colțul de sus Există un buton instalat sub formă de cruce.

Care va fi folosit pentru a dezactiva funcția sau pur și simplu pentru a face ca rama să dispară, unde chiar și pe acest element mic există un efect de schimbare a paletei de culori. Acum webmaster-ul îl poate pune pe site și plasează în el o descriere sau operatori care pot afișa diferite categorii, ca statistici sau informator.

Dar lucrul este că, dacă aveți un stil de resurse întunecat, atunci în stil puteți schimba rapid gama sau, mai degrabă, o puteți adapta la design original. Aici este unul dintre metode standard cum se face CSS pur la o fereastră modală care va fi lansată atunci când se face clic pe butonul de sub linkul cu legare HTML. Butonul în sine este mai mult pentru vizibilitate, unde în stiluri eliminați o clasă și rămâne numele, care poate fi plasat fie în navigare, fie în panoul de control, unde se află funcționalitatea principală sau navigarea pe site.

Aceasta se întâmplă când verifici dacă totul funcționează bine:

Să începem instalarea:

Fereastra cu buton

ZorNet.Ru - portal webmaster×
Aici veți găsi conținut pe tema pentru site.

CSS

Butksaton-satokavate (
display: inline-block;
text-decor: niciuna;
margine-dreapta: 7px;
chenar-rază: 5px;
umplutură: 7px 9px;
fundal: #199a36;
culoare: #fbf7f7 !important;
}

anelumen (
display: flex;
poziție: fixă;
stânga: 0;
sus: -100%;
latime: 100%;
inaltime: 100%;
alinierea elementelor: centru;
justificare-conținut: centru;
opacitate: 0;
-webkit-tranziție: top 0s .7s, opacitate .7s 0s;
tranziție: top 0s .7s, opacitate .7s 0s;
}

Anelumen:țintă (
sus: 0;
opacitate: 1;
-webkit-tranziție: niciuna;
tranziție: niciuna;
}

Figura anelumenului (
latime: 100%;
lățime maximă: 530px;
poziție: relativă;
umplutură: 1,8 em;
opacitate: 0;
culoare de fundal: alb;
-webkit-tranzitie: opacitate .7s;
tranziție: opacitate .7s;
}

Anelumen.lowingnuska figura (
fundal: #f9f5f5;
chenar-rază: 7px;
padding-top: 8px;
chenar: 3px solid #aaabad;
}

Anelumen.lowingnuska figura h2 (
margine-top: 0;
umplutură-partea de jos: 3px;
chenar-jos: 1px solid #dcd7d7;
}

Anelumen: cifră țintă (
opacitate: 1;
}

Anelumen.lowingnuska.compatibg-ukastywise (
text-decor: niciuna;
poziție: absolută;
dreapta: 8px;
sus: 0px;
dimensiunea fontului: 41px;
}

Anelumen.nedismiseg (
stânga: 0;
sus: 0;
latime: 100%;
inaltime: 100%;
poziție: fixă;
culoare de fundal: rgba(10, 10, 10, 0,87);
continut: "";
cursor: implicit;
vizibilitate: ascuns;
-webkit-tranziție: toate .7s;
tranziție: toate .7s;
}

Anelumen:target .nedismiseg (
vizibilitate: vizibil;
}

De asemenea, trebuie să știți că stilul CSS și pseudo-clasa sunt una dintre cele care nu sunt utilizate pe deplin de Caracteristici CSS cu multe aplicații potențiale interesante.

Începe când adresa URL pagina corespunde cu identificatorul elementului său, sau îl puteți spune diferit, acesta este momentul în care utilizatorul sare la element specific pe pagina.

Foarte des, casetele de dialog sunt folosite pentru a introduce orice date în aplicațiile Windows. Aceste ferestre conțin controale în care sunt introduse datele solicitate de aplicație și butoanele OK și Anulare, primul confirmând introducerea datelor, iar al doilea anulează.

Există două tipuri de casete de dialog:

• Casete de dialog modale blocați toate celelalte ferestre ale aplicației, adică utilizatorul nu va putea accesa nicio altă fereastră până când nu închide caseta de dialog făcând clic pe OK sau Anulare. În mod obișnuit, casetele de dialog modale sunt folosite pentru a introduce unele date care sunt critice pentru ca aplicația să continue să ruleze. De exemplu, dialogul de deschidere a fișierului este întotdeauna făcut modal.
• Casete de dialog fără model (fără model). nu blocați alte ferestre ale aplicației. Utilizatorul poate comuta liber între o astfel de casetă de dialog și orice altă fereastră de aplicație. Casetele de dialog fără model sunt folosite mult mai puțin frecvent decât cele modale. Acestea sunt folosite pentru a specifica parametrii de funcționare care nu sunt critici pentru continuarea programului și pentru a efectua diverse acțiuni cu fereastra principală sau un document încărcat în ea. Astfel, dialogul de căutare este întotdeauna fără model.

Internet Explorer ne permite să folosim atât casete de dialog modale, cât și fără model în aplicațiile HTML. Acum vom vedea cum se face acest lucru.

Nota:
Înainte de a citi acest articol, vă recomandăm insistent să citiți cele trei articole anterioare din serie despre aplicațiile HTML din Internet Explorer.

1. Pregătiți o aplicație HTML de testare
Să creăm o aplicație simplă de editare de text HTML, fără clopoței și fluiere. Acesta va conține o zonă mare de editare, unde, de fapt, este introdus textul, iar butonul Parametri, la apăsare, va fi afișată o casetă de dialog pentru introducerea parametrilor.

Setul de parametri pe care utilizatorul îi poate specifica va fi mic. Aceasta este, în primul rând, funcția de împachetare a textului în zona de editare - dacă va fi activată sau dezactivată. Și culoarea textului; permite utilizatorului să aleagă între negru, albastru, verde și roșu.

Vom implementa această aplicație în două versiuni: prima va folosi o casetă de dialog modală pentru a introduce parametri, iar a doua va folosi un dialog fără model.

Codul HTML al aplicației este prezentat mai jos.

Editor de text


window.resizeTo(710, 490);

Să salvăm această aplicație în două fișiere: Textedit_modal.hta (versiune cu o casetă de dialog modală) și Textedit_modeless.hta (versiune cu o casetă de dialog fără model). Și să începem...

2. Cum sunt implementate casetele de dialog
Dar mai întâi, un scurt curs teoretic. În primul rând, conținutul oricărei casete de dialog - atât modal, cât și non-modal - este implementat sub forma unei pagini web obișnuite. Această pagină web este salvată în dosar separat cu extensia htm sau html (precum și conținutul „ferestrelor” individuale ale aplicației, a căror creare a fost descrisă în al doilea articol al seriei).

Când deschidem o casetă de dialog modală, îi putem transmite câteva date (mai multe despre asta mai târziu). Acestea ar putea fi, de exemplu, valorile curente ale parametrilor aplicației, care vor fi apoi înlocuite în controalele casetei de dialog.

Când închidem un dialog modal, putem transmite câteva date în fereastra care l-a deschis. În cazul unui dialog de setări, acestea pot fi valori ale parametrilor introduse de utilizator.

Când deschidem o casetă de dialog fără model, nu îi putem transmite date și nici nu putem returna datele introduse în ea în fereastra care a deschis-o. Cu toate acestea, putem accesa această fereastră din fereastra care a deschis-o și, invers, „obține” din caseta de dialog la fereastra care a deschis-o. Putem folosi acest lucru pentru a face schimb de date între ferestre și pentru a efectua acțiuni asupra conținutului unei ferestre din alta.

Asta e tot deocamdată. Să intrăm în practică. Și vom lua în considerare și alte probleme teoretice pe parcurs.

3. Implementarea modalelor casete de dialog
Să începem prin a implementa casete de dialog modale ca fiind cele mai frecvent utilizate.

3.1. Deschiderea unei casete de dialog modal
Tocmai am aflat că conținutul casetei de dialog este implementat ca o pagină web obișnuită. Crearea unei pagini web nu este dificilă pentru noi. Dar cum deschideți caseta de dialog în sine?

Pentru a deschide o casetă de dialog modală, utilizați metoda showModalDialog a obiectului Window. Formatul pentru apelarea acestei metode este:

.showModalDialog(
[,
[,
]]
);
Primul parametru al acestei metode este necesar. Specifică adresa de Internet a paginii web care implementează conținutul casetei de dialog, sub formă de șir.

Window.showModalDialog("options_modal.html");
Al doilea parametru este opțional. Specifică valoarea care va fi transmisă casetei de dialog. (Vom analiza mai târziu cum să obținem această valoare în caseta de dialog.) Valoarea transmisă poate fi de orice tip: șir, număr, boolean, matrice, funcție sau o instanță a oricărui obiect.

Aici am trecut numărul 2 în caseta de dialog.

Al treilea parametru, de asemenea opțional, specifică parametrii casetei de dialog în sine. Ar trebui să fie un șir care să conțină numele parametrilor și valorile acestora. Numele parametrului este separat de valoare prin două puncte și parametrii individuali separate între ele prin punct și virgulă (ca și în cazul scrierii stilurilor CSS).

„dialogHeight:300px;dialogWidth:400px”);
Aici am specificat parametrii casetei de dialog de deschis - înălțime (300 pixeli) și lățime (400 pixeli).

Lista opțiunilor casetei de dialog acceptate de Internet Explorer este destul de mare. Să ne uităm la ele.

• dialogLeft - setează coordonatele orizontale a colțului din stânga sus al casetei de dialog în raport cu colțul din stânga sus al ecranului. Dacă acest parametru nu este specificat, coordonata orizontală a ferestrei va fi aleasă arbitrar.
• dialogTop - setează coordonatele verticale a colțului din stânga sus al casetei de dialog în raport cu colțul din stânga sus al ecranului. Dacă acest parametru nu este specificat, coordonatele verticale ale ferestrei vor fi alese în mod arbitrar.
• dialogHeight - setează înălțimea casetei de dialog. Dacă acest parametru nu este specificat, caseta de dialog va avea înălțimea implicită. Valoarea minimă posibilă a înălțimii este de 100 de pixeli.
• dialogWidth - setează lățimea casetei de dialog în pixeli. Dacă acest parametru nu este specificat, caseta de dialog va avea lățimea implicită. Lățimea minimă posibilă este de 250 de pixeli. Pentru a specifica coordonatele colțului din stânga sus și dimensiunile casetei de dialog se poate folosi orice unitate de măsură suportată de CSS, cu indicarea obligatorie a desemnării acesteia. Deci, în exemplul de mai sus, caracterele px plasate după valorile înălțimii și lățimii indică faptul că sunt specificate în pixeli.
• dialogHide - specifică dacă caseta de dialog ar trebui să fie ascunsă la imprimare sau previzualizareînainte de imprimare. O valoare de yes, 1 sau on indică acest lucru, iar o valoare de no, 0 sau off indică nu. Valoarea implicită este nr.
• center - specifică dacă caseta de dialog ar trebui să fie în centrul ecranului. O valoare de da, 1 sau activat îi spune Internet Explorer să centreze caseta de dialog pe ecran, în timp ce o valoare de nu, 0 sau off îi spune Internet Explorer să nu facă acest lucru. Valoarea implicită este da.

  Nota:
  Dacă specificați coordonatele casetei de dialog folosind parametrii dialogHeight și dialogWidth, caseta de dialog va fi amplasată în locația specificată pe ecran, indiferent de valoarea parametrului central. Sau, cu alte cuvinte, parametrii dialogHeight și dialogWidth au prioritate.

• margine - setează tipul de chenar care va fi afișat în jurul conținutului casetei de dialog, în interiorul zonei sale client ( zona clientului- aceasta este zona interioară a ferestrei unde este afișat conținutul real al paginii web). Valoarea ridicată indică afișarea unui cadru „ridicat” (de fapt, un astfel de cadru este aproape invizibil), iar valoarea scufundată indică unul „încastrat” (și acest cadru se observă destul de bine și, trebuie să spun, strică foarte mult vedere). Valoarea implicită este crescută.
• redimensionabil - indică dacă utilizatorul va putea redimensiona caseta de dialog. O valoare de da, 1 sau on îi conferă această abilitate, dar o valoare de nu, 0 sau off nu. Valoarea implicită este nr. Aproape toate casetele de dialog utilizate în aplicațiile scrise profesional au o dimensiune constantă și neschimbată. Faceți o casetă de dialog cu redimensionabil nu are rost, în plus, o astfel de fereastră va arăta ciudat.
• scroll - specifică dacă caseta de dialog va avea bare de defilare. O valoare de yes, 1 sau on îi spune Internet Explorer să le afișeze, în timp ce o valoare de no, 0 sau off face ca Internet Explorer să nu le afișeze. Valoarea implicită este da. Este ciudat că dezvoltatorii Internet Explorer au decis să ofere casetelor de dialog bare de defilare în mod implicit. În memoria autorului, nici o singură aplicație Windows care a ajuns în mâinile lui nu avea casete de dialog cu bare de defilare (dacă nu, bineînțeles, numarați meșteșugurile elevilor, în care s-a întâlnit ceva asemănător...). În general, o casetă de dialog de defilare pare extrem de ridicolă. Deci concluzia este clară - eliminăm barele de defilare!

  Window.showModalDialog("options_modal.html", 2,
  „dialogHeight:300px;dialogWidth:400px;scroll:no”);

• stare - specifică prezența sau absența unei linii de stare în caseta de dialog. O valoare de da, 1 sau activat afișează o linie de stare în fereastră, în timp ce o valoare de nu, 0 sau off nu. Valoarea implicită este nr. Linia de stare din caseta de dialog este în mod clar un accesoriu inutil. Nici o singură aplicație cu care autorul s-a ocupat nu a făcut astfel de lucruri. Nici noi nu vom face.
• neîmpodobit - specifică dacă caseta de dialog ar trebui să aibă un chenar, un titlu, meniul de sistemși butoane pentru a maximiza, a minimiza și a închide sau, după cum se spune acum, crom. O valoare de da, 1 sau on specifică absența cromului, iar o valoare de nu, 0 sau off specifică prezența acestuia. Valoarea implicită este nr. În general, ar trebui să eliminați Chrome doar din casetele de dialog sofisticate în aplicații la fel de sofisticate. O fereastră fără crom arată extrem de neobișnuit și poate descuraja utilizatorul.

După apelarea metodei showModalDialog, execuția scriptului web se oprește până când caseta de dialog este închisă. Execuția va continua numai după ce fereastra este închisă.

Rămâne de spus despre rezultatul pe care îl întoarce metoda showModalDialog. Aceasta este valoarea care a fost transmisă de caseta de dialog către fereastra care a deschis-o. Această valoare poate fi de orice tip: șir, număr, boolean, matrice, funcție sau o instanță a oricărui obiect.

Nota:
Apelurile la metoda showModalDialog pot fi prezente numai în handlerele de evenimente care apar ca urmare a acțiunilor utilizatorului (de exemplu, un eveniment de clic). În caz contrar, apelul la această metodă va fi ignorat.

3.2. Transmiterea unor date într-un dialog modal când se deschide
Foarte des trebuie să transmiteți unele date în caseta de dialog modală care se deschide. De exemplu, acestea ar putea fi valorile curente ale parametrilor care ar trebui înlocuiți în controalele acestei ferestre.

Știm deja că putem trece o valoare de orice tip unui dialog modal făcându-l al doilea parametru la apelul metodei showModalDialog.

Window.showModalDialog("options_modal.html", 2);
Dar dacă trebuie să transmitem mai multe valori în caseta de dialog? Există două moduri de a face acest lucru.

Prima metodă este să creați o matrice și să puneți valorile care urmează să fie transmise în elementele sale.

Var aParams = adevărat;
var aParams = "negru";

Aici am creat o matrice obișnuită aParams cu două elemente, cărora li s-au atribuit valori care sunt transmise casetei de dialog.

Putem crea și matrice asociativă(hash):

Var aParams["wrap"] = true;
var aParams["color"] = "negru";
window.showModalDialog("options_modal.html", aParams);
Poate că acest lucru este mai convenabil - indicii hash de șir sunt mai ușor de reținut decât indicii numerici ai unui tablou obișnuit.

A doua metodă este să creați o instanță a obiectului Object folosind un inițializator JavaScript, să creați proprietăți în acesta și să le atribuiți valorile transmise.

Var oParams = ( wrap: adevărat, culoare: „negru”);
window.showModalDialog("options_modal.html", oParams);
Ce metodă să alegi este o chestiune de gust. De exemplu, autorul preferă instanțele Object, citindu-le ca fiind cele mai potrivite în acest scop. Și unii pot găsi matrice mai convenabile - cele obișnuite sau hashuri.

3.3. Primirea într-un dialog modal a datelor trecute de fereastra care le-a deschis
Deci, am transmis datele în fereastra modală. Acum trebuie să le aducem cumva în această fereastră.

Obiectul Window acceptă o proprietate numai pentru citire dialogArguments. Stochează valoarea care a fost transmisă casetei de dialog ca al doilea parametru al metodei showModalDialog. Exact ce ne trebuie.

Nota:
Proprietatea dialogArguments este disponibilă numai în casetele de dialog.

Iată cum putem obține valorile transmise ca elemente hash:

Var aParams = window.dialogArguments;
var bWrap = aParams[„wrap”];
var sColor = aParams["culoare"];
Și acestea sunt valorile transmise ca proprietăți ale unei instanțe a obiectului Object:

Var oParams = window.dialogArguments;
var bWrap = oParams.wrap;
var sColor = oParams.color;
3.4. Transmiterea datelor dintr-un dialog modal către fereastra care l-a deschis
Rămâne să ne dăm seama cum să transferăm datele către sens invers- de la o casetă de dialog modală la fereastra care a deschis-o. Va trebui să returnăm noi valori specificate de utilizator din caseta de dialog pentru parametri, nu?

Orice valoare ar trebui să fie transmisă dintr-o casetă de dialog în fereastra care a deschis-o numai dacă utilizatorul a făcut clic pe butonul OK. Dacă faceți clic pe Anulare, de obicei nu trebuie să faceți acest lucru; În general, butonul Anulare ar trebui să închidă doar caseta de dialog și să nu efectueze nicio altă acțiune.

Deci, utilizatorul a făcut clic pe butonul OK din caseta de dialog. Acum trebuie să transmitem câteva date în fereastra din care a fost deschis dialogul. Cum să faci asta?

Obiectul Window acceptă o proprietate returnValue. Această proprietate stochează valoarea care ar trebui să fie transmisă din dialogul modal în fereastra care a deschis-o. Această valoare poate fi de orice tip.

Nota:
Proprietatea returnValue este disponibilă numai în casetele de dialog modale.

De exemplu, așa putem transmite o singură valoare din fereastra care se deschide:

Window.returnValue = 2;
Și așa - mai multe sensuri:

Window.returnValue = ( wrap: bWrap, culoare: sColor );
Desigur, în acest caz putem folosi și o matrice obișnuită sau hash.

Dacă utilizatorul a făcut clic pe butonul Anulare din caseta de dialog, noi, așa cum sa convenit mai devreme, nu vom atribui nicio valoare proprietății returnValue. În acest caz, această proprietate va primi valoarea implicită - null. Apropo, același lucru se va întâmpla dacă utilizatorul închide caseta de dialog apăsând butonul de închidere sau combinația de taste +.

Amenda! Caseta de dialog este închisă (vom afla cum să o închidem mai târziu). Acum fereastra care a deschis-o ar trebui să primească valoarea proprietății returnValue. Cum?

Foarte simplu. Valoarea proprietății returnValue va fi returnată de metoda showModalDialog ca rezultat. Cu toate acestea, acest lucru a fost deja menționat la punctul 2.1.

Trebuie să verificăm dacă această valoare este nulă. Dacă acesta este cazul, atunci caseta de dialog nu a transmis nicio dată. În caz contrar, vom putea folosi cumva datele transmise acestora în aplicație.

Var oResult = window.showModalDialog(...);
if (oResult != null) (
var bResultWrap = oResult.wrap;
var sResultColor = oResult.color;
}
3.5. Închiderea unui dialog modal
În cele din urmă, ar trebui să închidem caseta de dialog modală. Pentru a face acest lucru, putem folosi o metodă care nu acceptă parametri și nu returnează un rezultat. obiect apropiat Fereastră.

Window.close();
3.6. Aplicație HTML cu suport pentru dialoguri modale
Ei bine, este timpul pentru practică pură. Să completăm aplicația noastră de editor de text HTML, astfel încât să accepte setarea parametrilor folosind o casetă de dialog modală.

Codul aplicației HTML în sine (fișierul Textedit_modal.hta) după corecții va arăta astfel:

Editor de text


window.resizeTo(710, 490);

Var bWrap = adevărat;
var sColor = „negru”;

Funcția 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;
}
}










Aici, în principiu, totul ne este deja familiar. Este necesară doar o explicație minimă.

În primul rând, am declarat două variabile - bWrap și sColor - care vor stoca valorile curente ale parametrilor aplicației. Prima variabilă va stoca o valoare logică - o indicație a faptului dacă zona de editare este în curs de executare în acest momentîmpachetare linie. Și a doua variabilă va stoca valoarea curentă a culorii textului în zona de editare ca șir.

Nota:
În general, valorile curente ale parametrilor nu pot fi stocate nicăieri, ci de fiecare dată obținute din proprietățile corespunzătoare ale instanței obiectului HTMLTextAreaElement, care reprezintă zona de editare în care este introdus textul. Autorul a decis pur și simplu să nu complice prea mult codul aplicației.

O zonă de editare este reprezentată de o instanță a unui obiect HTMLTextAreaElement. Acest obiect acceptă proprietatea wrap, care specifică modul de wrap. Valoarea „soft” a acestei proprietăți indică zonei de editare să efectueze întreruperi de linie, iar întoarcerile de cărucior și avansurile de linie nu vor fi inserate la întreruperi de linie („soft”). Iar valoarea „off” îi spune zonei de editare să nu rupă deloc liniile.

Toate obiectele reprezentând elementele paginii web acceptă proprietate de stil. Această proprietate stochează o instanță a obiectului CSSStyle reprezentând curentul Stilul CSS, care este legat de un anumit element de pagină web.

Obiectul CSSStyle, la rândul său, acceptă multe proprietăți corespunzătoare diferitelor atribute de stil. Astfel, proprietatea color corespunde atributului de stil cu același nume, care specifică culoarea textului.

Acum să creăm o pagină web care implementează caseta de dialog în sine. Să plasăm pe el caseta de selectare Încheiere text, lista derulantă Culoare text și, bineînțeles, butoanele OK și Anulare care sunt necesare pentru ferestrele de acest tip.

Codul pentru această pagină web este prezentat mai jos.

Opțiuni

setare funcție()
{
var oParams = window.dialogArguments;

OchkWrap.checked = oParams.wrap;
oSelColor.value = oParams.color;
}

Funcția sendParams()
{
var oChkWrap = document.getElementById("chkWrap");
var oSelColor = document.getElementById("selColor");
window.returnValue = ( wrap: oChkWrap.checked, culoare: oSelColor.value );
window.close();
}

Încheiere text

Culoarea textului

Negru
Roşu
Verde
Albastru

Aici, din nou, totul ne este deja familiar. Sunt necesare cele mai minime explicații.

Atributul SIZE al etichetei care creează lista specifică dimensiunea această listăîn puncte. O valoare de 1 pentru acest atribut de etichetă specifică faptul că lista trebuie să aibă un element înalt, adică ar trebui să fie o listă derulantă.

Atributul VALUE al unei etichete care creează un articol separat de listă specifică valoarea acelui articol.

Imediat după ce pagina web care implementează caseta de dialog se termină de încărcat, va avea loc evenimentul de încărcare. Am specificat funcția de configurare ca handler pentru acest eveniment. Această funcție va primi valoarea transmisă casetei de dialog din fereastra care a deschis-o - o instanță a unui Obiect cu proprietăți care stochează valorile curente ale setărilor aplicației. După aceea, va introduce aceste valori în controalele corespunzătoare.

Obiectul HTMLInputElement, care reprezintă un control, inclusiv o casetă de selectare, acceptă o proprietate bifată, care este disponibilă numai pentru casete de selectare. Această proprietate indică dacă caseta de selectare este bifată (adevărat) sau debifată (fals).

Obiectul HTMLSelectElement, care reprezintă o listă, acceptă o proprietate de valoare. Conține valoarea elementului din listă selectat în prezent sub formă de șir. Atribuind o valoare acestei proprietăți, vom spune listei să selecteze inițial un articol cu ​​acea valoare.

Când faceți clic pe butonul OK, va fi executat gestionarea evenimentului său de clic - funcția sendParams. Acesta va crea o instanță a unui obiect folosind un inițializator JavaScript și va seta proprietățile acestuia la valorile pe care utilizatorul le-a specificat în caseta de dialog - acestea vor deveni noile valori ale parametrilor aplicației. Va transmite instanța rezultată a obiectului în fereastra care a deschis această casetă de dialog, adică aplicației în sine, apoi va închide caseta de dialog.

Butonul Anulare închide pur și simplu caseta de dialog. Drept urmare, fereastra care a deschis această casetă de dialog va primi valoarea null - un semnal că utilizatorul nu a confirmat introducerea de noi parametri ai aplicației.

Să salvăm această pagină web în fișierul options_modal.html. Și să verificăm aplicația HTML finalizată în acțiune.

Elementul de dialog HTML5 oferă funcționalitate într-o casetă de dialog pe o pagină web. Caseta de dialog a elementului de dialog se află în arborele DOM și poate fi stilată folosind CSS obișnuit.

Exemple simple ale elementului de dialog Fereastra de dialog! Elementul de dialog în sine nu va afișa vizual nimic, trebuie să utilizați API-ul JavaScript pentru a deschide și închide caseta de dialog. API .show() și .close() Folosind API-urile .show() și .close() din elementul DOM de dialog, puteți deschide și închide o casetă de dialog.

Fereastra de dialog!

Închide caseta de dialog Deschide! var dialog = document.querySelector("dialog"); document.querySelector("#show").onclick = function() ( dialog.show(); ); document.querySelector("#close").onclick = function() ( dialog.close(); );

Fereastra de dialog!

Închide Deschide caseta de dialog!

Stil pentru o casetă de dialog Puteți adăuga un stil personalizat elementului de dialog în același mod ca și altor elemente de bloc: nav, div, subsol etc.

dialog ( chenar: 1px rgba solid(0, 0, 0, 0,3); chenar-rază: 6px; casetă-umbră: 0 3px 7px rgba(0, 0, 0, 0,3); )

Stilizarea unui element de dialog este la fel de ușor ca stilul unui div!

Închide caseta de dialog Deschide stiluri

Function.showModal() API Pentru a face o casetă de dialog modală, trebuie să apelați funcția .showModal() în loc de .show() . Vă rugăm să rețineți că nu puteți selecta text fundal

sau faceți clic pe butonul pentru a selecta butoanele din caseta de dialog deschisă.

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

Acest strat este deasupra altor ferestre de elemente, indiferent de valorile indexului z, inclusiv casetele de dialog modale deschise anterior.

Dacă este necesar, puteți închide dialogul modal folosind tasta „escape”!

Aproape

Adăugați un fundal unei casete de dialog

Pentru a umple fundalul cu culoare, puteți folosi pseudo-element::backdrop .

Dialog::fond (poziție: fix; sus: 0; stânga: 0; dreapta: 0; jos: 0; culoare de fundal: rgba(0, 0, 0, 0.8); )

Întunecă fundalul folosind ::backdrop . Evidențiază caseta de dialog în timp ce ascunde restul!

Închide Deschide caseta de dialog cu fundal

Returnarea valorilor dintr-o casetă de dialog Puteți transmite un argument la .close() . Dialogul revine valoarea stabilită

proprietăți.returnValue .

Deschide un dialog!

Caseta de dialog primește un argument close(). Acest lucru se va reflecta în .returnValue

Trimite dialog Deschide Avantajele elementului Desigur, poți folosi biblioteca jQuery sau alt JavaScript pentru a obține acest rezultat. Dar dialogul este element HTMLși nu trebuie să conectați biblioteci terțe pentru a crea o casetă de dialog pop-up.

Elementul este, de asemenea, excelent pentru accesibilitate. Browserul înțelege că elementul este modal, astfel încât tehnologiile precum cititoarele de ecran știu ce conținut ar trebui să fie interactiv.

În plus, dialogurile modale sunt plasate destul de ordonat într-o stivă „strat superior” și stau deasupra altor elemente, indiferent de proprietățile z-index. Bazându-ne pe z-index, plasarea unui dialog modal deasupra paginilor web este dificilă.

Poziţie

Dialogurile au unele caracteristici speciale de poziționare. În mod implicit, când apelați dialog.show(), caseta de dialog este centrată în fereastra de vizualizare. Desigur, puteți schimba acest lucru folosind poziționarea CSS obișnuită, cum ar fi top: 15px .

Și trebuie să știi și asta poziționare absolută caseta de dialog, numai pentru blocul care conține containerul inițial. Prin urmare, un dialog poziționat absolut nu înțelege lucruri precum poziția, depășirea și procentele.

Specificația include o ancoră de poziționare care vă permite să ancorați dialogul la un alt element. Cu toate acestea, acest lucru nu este încă implementat în Chrome.

Deschideți mai multe ferestre de dialog

Dacă dialogurile nu sunt modale, ele se comportă ca elemente multiple. Pentru modal, browserul împinge dialogul în stivă. Partea de sus a stivei este o casetă de dialog modală activă care blochează paginile rămase ale documentului. Ori de câte ori se deschide un dialog modal, acesta este împins în partea de sus a stivei. Ori de câte ori un dialog modal este închis, acesta este eliminat din stivă. Dialogurile sunt afișate în ordinea stivei, astfel încât dialogul activ este cel mai înalt.

Noile elemente HTML5 și noile API-uri JavaScript ne permit să creăm aplicatii complexe pentru browsere. O parte din oricare aplicație modernă sunt diverse casete de dialog. Acestea solicită utilizatorilor să confirme anumite acțiuni sau pur și simplu să afișeze mesaje. Cu un element nou "" Acum putem crea aceste ferestre folosind HTML5 pur.

Markup simplu, fără stiluri

Elementul poate fi plasat oriunde în interior eticheta corporală pe pagina HTML. Nu este recomandat să-l plasați în paragrafe de text -

, deoarece acest lucru poate cauza probleme de afișare. Acest lucru este cel mai probabil să se întâmple cu elementele care conțin elemente suplimentareși nu numai cele text. Definiția proprietății " deschide" va afișa o casetă de dialog când pagina este deschisă. Fără această proprietate, fereastra va fi în forma originalaînchis.

Vă rugăm să citiți Termenii și condițiile noastre.

Termeni și condiții...

…

În exemplul nostru, am definit o casetă de dialog între două paragrafe. Această poziție a elementului asigură că acesta este afișat orizontal și centrat, fără a ține cont de fluxul altor elemente. Pe verticală, își calculează poziția față de marginea de sus a ferestrei browserului. Dacă sunteți mulțumit de acest lucru, atunci nu este necesar niciun CSS.

Dacă vizualizarea standard nu este pentru dvs., adăugați propriile stiluri și personalizați-o după bunul plac. Puteți folosi orice Proprietăți CSS cum să personalizați elementele bloc - cele mai utilizate "raza de frontieră"Şi "umbră" pentru efecte suplimentare.

Dialog de gestionare cu JavaScript

Pentru a deschide și închide un element utilizați Metode JavaScript spectacol()Şi aproape().

document.getElementsByTagName ("span") [ 0 ] .addEventListener ( "clic" , funcția () (
document.getElementsByTagName(„dialog”)[0].show();
), fals ) ;

Document.getElementsByTagName ("dialog") [ 0 ] .addEventListener ( "clic" , funcția () (
this.close();
), fals ) ;

În exemplul nostru, definim două evenimente. Primul eveniment determină deschiderea unui element de dialog atunci când se face clic pe primul element . Făcând clic pe o casetă de dialog deschisă, o va închide.

Forme în interior Element de dialog

Un element poate conține nu numai text simplu, ci și elemente suplimentare. Acest lucru ne permite, de exemplu, să plasăm un formular într-o casetă de dialog. Vă rugăm să rețineți că în loc de metode convenționale "post"Şi "obţine" va trebui să folosiți o metodă specială" dialog" pentru a procesa conținutul formularului.

Termenii și condițiile noastre...

Accepta
Refuza

În acest exemplu, am creat un formular cu două butoane în interiorul unui dialog. Făcând clic pe oricare dintre butoane, se închide elementul de dialog. Nu este necesar JavaScript aici. Dar dacă doriți să împiedicați închiderea ferestrei la clic, mai trebuie să utilizați JavaScript. Doar adăugați evenimentul " clic" pentru un buton, care va împiedica acțiunea implicită a butonului cu „preventDefault()”.

Reacția la închiderea unei casete de dialog

Eveniment "aproape" ne permite să răspundem la închiderea casetei de dialog.

document.getElementsByTagName ("dialog" ) [ 0 ] .addEventListener ( "închidere" , funcția (e) (
var răspuns = this .returnValue ;
), fals ) ;

Proprietate "returnValue" se întoarce "valoare"- valoarea butonului care a fost folosit pentru a închide fereastra. Dacă în exemplul nostru s-a făcut clic pe butonul „Refuză”. „Valoare de returnare” va returna valoarea „nu” (value="nr"). Это дает нам простой способ инициирования определенных функций в зависимости от нажатой кнопки.!}

Crearea unei casete de dialog modale

Dacă doriți să vă asigurați că niciun alt conținut de pe pagina dvs. HTML nu poate fi accesat în timp ce dialogul este deschis, atunci puteți utiliza dialoguri modale. Se vor deschide doar când Ajutor JavaScriptși metoda lui" showModal()„. Dialogurile modale fac ca toate celelalte conținuturi să fie inactive. Nu puteți da clic, modifica sau selecta conținut inactiv.

document.getElementsByTagName(„dialog”)[0].showModal();

Spre deosebire de casetele de dialog standard, opțiunea modală va fi centrată nu numai pe orizontală, ci și pe verticală.

Dacă doriți să utilizați o culoare diferită, puteți utiliza pseudo-elementul " ::fondul„Asigurați-vă că alegeți o culoare cu o valoare scăzută” RGBA()„ pentru a evita ascunderea completă a conținutului.

dialog: :backdrop (
fundal: rgba(255, 0, 255, 0,25);
}

În exemplul nostru, am decis să folosim o culoare galben deschis. Daca vrei poti alege imagine de fundalîn loc de culoare.

Dialogurile modale pot fi întotdeauna închise apăsând tasta ESC. Acest lucru face necesară adăugarea unui alt eveniment la dialog. Imediat ce evenimentul "aproape" a funcționat când fereastra este închisă folosind un buton de formular, asigurați-vă că adăugați un eveniment "anula". Se va declanșa imediat ce fereastra modală este închisă folosind tasta ESC.

document.getElementsByTagName ("dialog" ) [ 0 ] .addEventListener ( "anulează" , funcția (e) (
var răspuns = „anulat” ;
), fals ) ;

Utilizarea mai multor elemente de dialog pe o pagină

Dacă ai mai mult de unul dialog deschisîn același timp, folosiți stiluri pentru a vă asigura că nu se suprapun. Excepție pentru ferestrele modale, acestea vor bloca întotdeauna alt conținut și astfel nu vor permite utilizarea a mai mult de unul fereastra modală simultan.

Suport pentru browser

Suportul pentru element nu este încă suficient de răspândit la momentul scrierii acestui articol. Numai ChromeŞi Safari interpretează corect elementul. Toate celelalte browsere îl tratează ca simplu element bloc, ceea ce înseamnă că vor afișa întotdeauna conținutul acestuia, indiferent dacă proprietatea este setată "deschide" sau nu. Starea actuală a lucrurilor este posibilă.

Dacă aveți întrebări, vă recomandăm să utilizați

După un număr mare de reclame pop-up pe diverse site-uri, atitudinea față de diverse casete de dialog este oarecum negativă. Cu toate acestea, totul depinde cu siguranță de scopul în care sunt utilizate. Uneori, utilizarea lor este necesară și simplifică foarte mult experiența utilizatorului.

Anterior, pentru a crea casete de dialog trebuia să vă conectați Pluginul jQuery ca Pop Easy, Twitter Bootstrap Dialog UI Modal sau jQuery. Cu toate acestea, HTML 5, care a crescut semnificativ în capabilități, vă permite să evitați utilizarea lor prin utilizarea unui element încorporat numit .

Anterior, în 2009, acest element făcea deja parte din HTML 5, dar era exclus din acesta. Acum s-a întors din nou - într-o formă nouă.

Suport pentru elemente de către browsere

Din păcate, suportul său este extrem de limitat în acest moment. Poate fi folosit doar în Safari 6.0 și Chrome Canary. Cu toate acestea, în Chrome Canary trebuie să îl activați mai întâi în setări. Pentru a face acest lucru, accesați chrome://flags și activați „Activați funcțiile experimentale ale platformei web”.

Interacțiunea cu metodele HTMLDialogElement:

HTMLDialogElement are următoarele metode care vă permit să lucrați cu casete de dialog.

• show() : Această metodă este folosită pentru a deschide un dialog. Diferența dintre această metodă și următoarea este că, în ciuda ferestrei de dialog deschise, utilizatorii au în continuare posibilitatea de a folosi pagina - o pot derula, copia ceva, pot urma link-uri fără a reîncărca pagina etc.
• showModal() : În în acest caz, Utilizatorul are acces doar la „fereastra modală” deschisă.
• close() : Această metodăînchide dialogul. Privind puțin înainte, voi spune că puteți trece parametrul returnValue în el.

Atribute:

HTMLDialogElement include următoarele două atribute.

• returnValue: Returnează parametrul care a fost trecut la close() - nu este necesar să îl specificați, este opțional.
• deschis: este un tip de date boolean. Ceea ce înseamnă că poate lua doar două valori - adevărat, caz în care dialogul va fi afișat utilizatorului, sau fals, apoi este ascuns.

Evenimente:

Funcția apelată la închiderea onk-ului arată astfel:

dialog.addEventListener("close", function() ( Aici puteți deja să scrieți cod pentru a fi executat dacă fereastra este închisă ));

Pe lângă metodele și atributele menționate mai sus, acceptă și:

• form: Folosit pentru a integra un formular cu . Datorită acestei legături, funcționează numai în interiorul casetei de dialog.
• Atribut autofocus: Este necesar să se concentreze asupra intrărilor din interiorul dialogului.
• anulare eveniment: Acest eveniment va fi declanșat după ce fereastra este închisă printr-o tastă "Esc."

Acum, după ce ați studiat elementele de bază, puteți vedea un exemplu practic de utilizare.

Sintaxă pentru crearea casetelor de dialog

Mulțumim lui Hevix pentru o lecție grozavă;)

Închide Fereastra deschisă

Codul este atât de clar și simplu încât cred că nu necesită nicio explicație. Ceea ce trebuie să înțelegeți este că conținutul ferestrei pop-up este în interiorul etichetei, iar apelul său ar trebui să fie în afara acestei etichete.

Pentru a afișa conținutul elementului aveți nevoie folosind JavaScript, și anume apelarea metodelor .show() și .close(). Ele au fost deja menționate mai devreme.

(function() ( var dialog = document.getElementById("Dialog"); document.getElementById("showDialog").onclick = function() ( dialog.show(); ); document.getElementById("closeDialog").onclick = function() ( dialog.close(); ))();

(funcție() ( document. getElementById("showDialog"). onclick = funcție () ( dialog. spectacol(); document. getElementById("closeDialog"). onclick = funcție () ( dialog. aproape(); } ) () ;

Totul este gata. După cum puteți vedea, am folosit un număr minim de linii de cod, ceea ce nu este proporțional cu ceea ce se întâmplă dacă am conecta un plugin terță parte pentru asta. Acum, când faceți clic pe butonul „Deschideți fereastra”, veți vedea o casetă de dialog, dacă faceți clic pe butonul „Închidere”, o va ascunde.

Casete de dialog Stilare

Nu cred că este nevoie să aprofundăm prea mult cum să stilăm această fereastră pop-up folosind CSS. Totul este foarte clar aici chiar și fără ajutorul meu. O să-l întreb doar stilul general pentru aspect.

dialog (sus: 28%; lățime: 400px; chenar: 1px solid rgba(0, 0, 0, 0,3); chenar-radius: 15px; box-shadow: 0 3px 7px rgba(0, 0, 0, 0,3); chenar-sus: 5px solid #eb9816; ) buton (afișare: inline-block; chenar-rază: 3px; chenar: niciunul; dimensiunea fontului: 0.9rem; umplutură: 0.4rem 0.8em; fundal: #eb9816; marginea-jos : 1px solid #f1b75c: bold margin: 0.25rem buton:hover, button:focus (opacitate: 0,92; cursor; )

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; buton:hover, buton:focus ( opacitate: 0,92; cursor: pointer;

Crearea casetelor de dialog modale

Dacă doriți să concentrați toată atenția utilizatorului asupra ferestrei pop-up, este logic să utilizați casete de dialog modale. Provocarea lor nu este cu mult diferită de cele obișnuite. Trebuie doar să modificați fișierul JS .show() în .showModal() . Nu trebuie să modificați nimic în HTML.

(function() ( var dialog = document.getElementById("Dialog"); document.getElementById("showDialog").onclick = function() ( dialog. showModal(); ); document.getElementById("closeDialog").onclick = function() ( dialog.close(); ))();

(funcție() ( var dialog = document. getElementById(„Dialog”);