Maak een modaal venster met HTML5 en CSS3. Dialoogvensters maken in pure HTML5

laat een reactie achter 6,950

Nieuwe HTML5-elementen en nieuwe JavaScript-API's stellen ons in staat om te creëren complexe toepassingen voor browsers. Onderdeel van welke dan ook moderne toepassing zijn verschillende dialoogvensters. Ze vragen gebruikers om bepaalde acties te bevestigen of geven eenvoudigweg berichten weer. Met nieuw element "" Nu kunnen we deze vensters maken met pure HTML5.

Eenvoudige opmaak zonder stijlen

Het element kan overal binnen worden geplaatst lichaamstag op de HTML-pagina. Het wordt niet aanbevolen om het in tekstparagrafen te plaatsen -

, omdat dit weergaveproblemen kan veroorzaken. Dit zal hoogstwaarschijnlijk gebeuren met elementen die bevatten aanvullende elementen en niet alleen tekstberichten. Eigendomsdefinitie " open" zal een dialoogvenster tonen bij het openen van de pagina. Zonder deze eigenschap wordt het venster in zijn oorspronkelijke vorm gesloten.

Lees onze Servicevoorwaarden.

Servicevoorwaarden …

…

In ons voorbeeld hebben we een dialoogvenster tussen twee alinea's gedefinieerd. Deze positie van het element zorgt ervoor dat het horizontaal en gecentreerd wordt weergegeven, zonder rekening te houden met de stroming van andere elementen. Verticaal berekent het zijn positie ten opzichte van de bovenrand van het browservenster. Als je dat goed vindt, dan met behulp van CSS niet verplicht.

Als de standaardweergave niets voor jou is, voeg dan je eigen stijlen toe en pas deze naar wens aan. Je kunt ze allemaal gebruiken CSS-eigenschappen hoe blokelementen aan te passen - meest gebruikt "grensstraal" En "schaduw" voor extra effecten.

Dialoogvenster beheren met JavaScript

Gebruik om een element te openen en te sluiten JavaScript-methoden show() En dichtbij().

document.getElementsByTagName ("span" ) [ 0 ] .addEventListener ("klik" , function () (
document.getElementsByTagName("dialoog")[0].show();
), onwaar);

Document.getElementsByTagName ("dialoog" ) [ 0 ] .addEventListener ("klik" , function () (
deze.close();
), onwaar);

In ons voorbeeld definiëren we twee gebeurtenissen. De eerste gebeurtenis zorgt ervoor dat een dialoogelement wordt geopend wanneer op het eerste element wordt geklikt . Als u op een geopend dialoogvenster klikt, wordt het gesloten.

Formulieren binnen een Dialoogelement

Een element kan niet alleen eenvoudige tekst bevatten, maar ook aanvullende elementen. Hierdoor kunnen we bijvoorbeeld een formulier in een dialoogvenster plaatsen. Houd er rekening mee dat in plaats van de gebruikelijke methoden "na" En "krijgen" je zult moeten gebruiken speciale methode "dialoog" om de inhoud van het formulier te verwerken.

Onze servicevoorwaarden...

Aanvaarden
Weigeren

In dit voorbeeld hebben we een formulier gemaakt met twee knoppen in een dialoogvenster. Als u op een van de knoppen klikt, wordt het dialoogelement gesloten. Hier is geen JavaScript vereist. Maar als u wilt voorkomen dat het venster na een klik wordt gesloten, moet u nog steeds JavaScript gebruiken. Voeg gewoon het evenement toe " Klik" voor een knop, waarmee de standaardknopactie wordt voorkomen "voorkom standaard()".

Reactie op het sluiten van een dialoogvenster

Evenement "dichtbij" stelt ons in staat te reageren op het sluiten van het dialoogvenster.

document.getElementsByTagName ("dialoog" ) [ 0 ] .addEventListener ("sluiten" , functie (e) (
var antwoord = deze .returnValue ;
), onwaar);

Eigendom "winstwaarde" geeft terug "waarde"- de waarde van de knop die werd gebruikt om het venster te sluiten. Als in ons voorbeeld op de knop "Weigeren" is geklikt "Winstwaarde" retourneert de waarde "no" (value="no"). Это дает нам простой способ инициирования определенных функций в зависимости от нажатой кнопки.!}

Een modaal dialoogvenster maken

Als u er zeker van wilt zijn dat er geen andere inhoud op uw HTML-pagina toegankelijk is terwijl het dialoogvenster geopend is, kunt u modale dialoogvensters gebruiken. Ze gaan pas open wanneer JavaScript-hulp en zijn methode" showModal()"Modale dialogen maken alle andere inhoud inactief. Je kunt inactieve inhoud niet klikken, wijzigen of selecteren.

document.getElementsByTagName("dialoog")[0].showModal();

In tegenstelling tot standaard dialoogvensters, zal het modale niet alleen horizontaal, maar ook verticaal worden gecentreerd.

Als u een andere kleur wilt gebruiken, kunt u het pseudo-element " ::achtergrond"Zorg ervoor dat je een kleur kiest met een lage waarde" RGBA()"om volledige verhulling van de inhoud te voorkomen.

dialoogvenster: :achtergrond (
achtergrond: rgba(255, 0, 255, 0,25);
}

In ons voorbeeld hebben we besloten een lichtgele kleur te gebruiken. Als je wilt, kun je kiezen achtergrond afbeelding in plaats van kleur.

Modale dialoogvensters kunnen altijd worden gesloten door erop te klikken ESC-toets. Dit maakt het noodzakelijk om nog een gebeurtenis aan het dialoogvenster toe te voegen. Zodra het evenement "dichtbij" werkte als het venster werd gesloten met behulp van een formulierknop, zorg ervoor dat u een evenement toevoegt "annuleren". Het wordt geactiveerd zodra het modale venster wordt gesloten met de ESC-toets.

document.getElementsByTagName ("dialoog" ) [ 0 ] .addEventListener ("annuleren" , functie (e) (
var antwoord = "geannuleerd";
), onwaar);

Meer dan één dialoogelement op een pagina gebruiken

Als u meer dan één dialoogvenster tegelijkertijd geopend heeft, gebruik dan stijlen om ervoor te zorgen dat ze elkaar niet overlappen. Een uitzondering voor modale vensters: deze zullen altijd andere inhoud blokkeren en dus het gebruik van meer dan één modaal venster tegelijk niet toestaan.

Browser-ondersteuning

De steun voor dit element is op het moment van schrijven nog niet wijdverspreid genoeg. Alleen Chroom En Safari interpreteer het element correct. Alle andere browsers beschouwen het als eenvoudig blok-element, wat betekent dat ze altijd de inhoud ervan zullen weergeven, ongeacht of de eigenschap is ingesteld "open" of niet. De huidige stand van zaken is mogelijk.

Als u vragen heeft, raden wij u aan onze te gebruiken

Heel vaak worden dialoogvensters gebruikt om gegevens in Windows-toepassingen in te voeren. Deze vensters bevatten bedieningselementen waarin de door de toepassing vereiste gegevens worden ingevoerd, en de knoppen OK en Annuleren, waarvan de eerste de gegevensinvoer bevestigt en de tweede annuleert.

Er zijn twee soorten dialoogvensters:

Modale dialoogvensters blokkeer alle andere vensters van de toepassing, dat wil zeggen dat de gebruiker geen toegang heeft tot een ander venster totdat hij het dialoogvenster sluit door op OK of Annuleren te klikken. Doorgaans worden modale dialoogvensters gebruikt om bepaalde gegevens in te voeren die essentieel zijn voor de werking van de applicatie. Het dialoogvenster voor het openen van bestanden is bijvoorbeeld altijd modaal gemaakt.
Modeloze (modelloze) dialoogvensters blokkeer geen andere applicatievensters. De gebruiker kan vrijelijk schakelen tussen een dergelijk dialoogvenster en elk ander toepassingsvenster. Modelloze dialoogvensters worden veel minder vaak gebruikt dan modale dialoogvensters. Ze worden gebruikt om bedrijfsparameters te specificeren die niet essentieel zijn voor de werking en uitvoering van het programma diverse acties met het hoofdvenster of een document erin geladen. Het zoekdialoogvenster wordt dus altijd modelloos gemaakt.

Internet Explorer stelt ons in staat om zowel modale als modelloze dialoogvensters te gebruiken in HTML-toepassingen. Nu zullen we kijken hoe dit wordt gedaan.

Opmerking:
Voordat u dit artikel leest, raden wij u sterk aan de voorgaande drie artikelen in de serie over Internet Explorer HTML-toepassingen te lezen.

1. Bereid een HTML-testtoepassing voor
Laten we een eenvoudige HTML-teksteditor maken zonder toeters en bellen. Het zal een groot bewerkingsgebied bevatten, waar in feite de tekst wordt ingevoerd, en op de knop Parameters, wanneer erop wordt geklikt, wordt een dialoogvenster voor het invoeren van parameters weergegeven.

De set parameters die de gebruiker kan opgeven, zal klein zijn. Dit is in de eerste plaats de tekstomloopfunctie in het bewerkingsgebied - ongeacht of deze is ingeschakeld of uitgeschakeld. En tekstkleur; laat de gebruiker kiezen tussen zwart, blauw, groen en rood.

We zullen deze applicatie in twee versies implementeren: de eerste zal een modaal dialoogvenster gebruiken om parameters in te voeren, en de tweede zal een modelloos dialoogvenster gebruiken.

De HTML-code voor de applicatie vindt u hieronder.

Teksteditor

venster.resizeTo(710, 490);

Laten we deze applicatie in twee bestanden opslaan: Textedit_modal.hta (versie met een modaal dialoogvenster) en Textedit_modeless.hta (versie met een modelloos dialoogvenster). En laten we beginnen...

2. Hoe dialoogvensters worden geïmplementeerd
Maar eerst een korte theoretische cursus. Allereerst wordt de inhoud van elk dialoogvenster - zowel modaal als niet-modaal - geïmplementeerd in de vorm van een gewone webpagina. Deze webpagina is opgeslagen in apart bestand met de htm- of html-extensie (evenals de inhoud van individuele "vensters" van de applicatie, waarvan de creatie werd beschreven in het tweede artikel van de serie).

Wanneer we een modaal dialoogvenster openen, kunnen we er wat gegevens aan doorgeven (hierover later meer). Dit kunnen bijvoorbeeld de huidige waarden van applicatieparameters zijn, die vervolgens worden vervangen door de bedieningselementen van het dialoogvenster.

Wanneer we een modaal dialoogvenster sluiten, kunnen we enkele gegevens doorgeven aan het venster waarin het werd geopend. In het geval van een instellingendialoog kunnen dit door de gebruiker ingevoerde parameterwaarden zijn.

Wanneer we een modelloos dialoogvenster openen, kunnen we er geen gegevens aan doorgeven, en kunnen we de ingevoerde gegevens ook niet terugsturen naar het venster waarin het werd geopend. We hebben echter toegang tot dit venster vanuit het venster dat het heeft geopend, en omgekeerd kunnen we vanuit het dialoogvenster 'krijgen' naar het venster dat het heeft geopend. We kunnen dit gebruiken om gegevens tussen vensters uit te wisselen en acties uit te voeren op de inhoud van het ene venster vanuit het andere.

Dat is het voor nu. Laten we in de praktijk gaan. En de rest theoretische kwesties Laten we ernaar kijken terwijl we verder gaan.

3. Implementatie van modale dialoogvensters
Laten we beginnen met het implementeren van modale dialoogvensters, de meest gebruikte.

3.1. Een modaal dialoogvenster openen
We hebben zojuist vernomen dat de inhoud van het dialoogvenster is geïmplementeerd als een gewone webpagina. Een webpagina maken is voor ons niet moeilijk. Maar hoe open je het dialoogvenster zelf?

Om een modaal dialoogvenster te openen, gebruikt u de showModalDialog-methode van het Window-object. Het formaat voor het aanroepen van deze methode is:

.showModalDialog(
[,
[,
]]
);
De eerste parameter van deze methode is vereist. Het specificeert het internetadres van de webpagina die de inhoud van het dialoogvenster implementeert, als een tekenreeks.

Window.showModalDialog("opties_modal.html");
De tweede parameter is optioneel. Het specificeert de waarde die aan het dialoogvenster wordt doorgegeven. (We zullen later bekijken hoe we deze waarde in het dialoogvenster kunnen krijgen.) De doorgegeven waarde kan elk type zijn: string, getal, boolean, array, functie of een instantie van een willekeurig object.

Hier hebben we het getal 2 doorgegeven aan het dialoogvenster.

De derde, eveneens optionele, parameter specificeert de parameters van het dialoogvenster zelf. Het moet een string zijn die de namen van de parameters en hun waarden bevat. De naam van de parameter wordt van de waarde gescheiden door een dubbele punt, en individuele parameters van elkaar door een puntkomma (zoals in het geval van het schrijven van CSS-stijlen).

"dialogHeight:300px;dialogWidth:400px");
Hier hebben we de parameters van het te openen dialoogvenster gespecificeerd: hoogte (300 pixels) en breedte (400 pixels).

De lijst met dialoogvensteropties die door Internet Explorer worden ondersteund, is behoorlijk groot. Laten we ze eens bekijken.

dialogLeft - stelt de horizontale coördinaat van de linkerbovenhoek van het dialoogvenster in ten opzichte van de linkerbovenhoek van het scherm. Als deze parameter niet is gespecificeerd, wordt de horizontale coördinaat van het venster willekeurig gekozen.
dialogTop - stelt de verticale coördinaat van de linkerbovenhoek van het dialoogvenster in ten opzichte van de linkerbovenhoek van het scherm. Als deze parameter niet wordt gespecificeerd, wordt de verticale coördinaat van het venster willekeurig gekozen.
dialogHeight - stelt de hoogte van het dialoogvenster in. Als deze parameter niet is opgegeven, heeft het dialoogvenster de standaardhoogte. De minimaal mogelijke hoogtewaarde is 100 pixels.
dialogWidth - stelt de breedte van het dialoogvenster in pixels in. Als deze parameter niet is opgegeven, heeft het dialoogvenster de standaardbreedte. De minimaal mogelijke breedte is 250 pixels. Om de coördinaten van de linkerbovenhoek en de afmetingen van het dialoogvenster te specificeren, kan elke door CSS ondersteunde maateenheid worden gebruikt, met de verplichte vermelding van de aanduiding ervan. In het bovenstaande voorbeeld geven de px-tekens die na de hoogte- en breedtewaarden zijn geplaatst aan dat ze in pixels zijn opgegeven.
dialogHide - specificeert of het dialoogvenster verborgen moet zijn tijdens het afdrukken of voorbeeld voordat u gaat afdrukken. Een waarde van ja, 1 of aan geeft aan dat u dit doet, en een waarde van nee, 0 of uit geeft aan dat u dit niet doet. De standaardwaarde is nee.
midden - specificeert of het dialoogvenster zich in het midden van het scherm moet bevinden. Een waarde van yes, 1 of on vertelt Internet Explorer dat het dialoogvenster op het scherm moet worden gecentreerd, en een waarde van no, 0 of off vertelt Internet Explorer om dit niet te doen. De standaardwaarde is ja.
Opmerking:
Als u de coördinaten van het dialoogvenster opgeeft met behulp van de parameters dialogHeight en dialogWidth, zal het dialoogvenster zich bevinden op opgegeven locatie scherm, ongeacht de waarde middelste parameter. Met andere woorden: de parameters dialogHeight en dialogWidth hebben voorrang.
edge - stelt het type rand in dat wordt weergegeven rond de inhoud van het dialoogvenster, binnen het clientgebied ( klantengebied- dit is het binnenste gedeelte van het venster waar de daadwerkelijke inhoud van de webpagina wordt weergegeven). De verhoogde waarde geeft aan dat er een “verhoogd” frame wordt weergegeven (in feite is zo’n frame bijna onzichtbaar), en de verzonken waarde geeft een “verzonken” frame aan (en dit frame is vrij goed merkbaar en, ik moet zeggen, het bederft de kwaliteit enorm. weergave). De standaardwaarde wordt verhoogd.
resizable - geeft aan of de gebruiker het formaat van het dialoogvenster kan wijzigen. Een waarde van ja, 1 of aan geeft hem deze mogelijkheid, maar een waarde van nee, 0 of uit niet. De standaardwaarde is nee. Bijna alle dialoogvensters die in professioneel geschreven toepassingen worden gebruikt, hebben een constante en onveranderlijke grootte. Maak een dialoogvenster met aanpasbaar het heeft geen zin, bovendien ziet zo'n venster er vreemd uit.
scrollen - specificeert of het dialoogvenster schuifbalken heeft. Een waarde van yes, 1 of on geeft aan dat Internet Explorer ze moet weergeven, terwijl een waarde van no, 0 of off ervoor zorgt dat Internet Explorer ze niet weergeeft. De standaardwaarde is ja. Het is vreemd dat de ontwikkelaars van Internet Explorer besloten om dialoogvensters standaard schuifbalken te geven. In het geheugen van de auteur had geen enkele Windows-applicatie die hij in handen kreeg dialoogvensters met schuifbalken (tenzij je natuurlijk de ambachten van studenten meetelt, waarin iets soortgelijks werd aangetroffen...). Over het algemeen ziet een scrollend dialoogvenster er buitengewoon belachelijk uit. De conclusie is dus duidelijk: we verwijderen de schuifbalken!
Window.showModalDialog("options_modal.html", 2,
"dialogHeight:300px;dialogWidth:400px;scroll:nee");
status - specificeert de aanwezigheid of afwezigheid van een statusregel in het dialoogvenster. Een waarde van ja, 1 of aan geeft een statusregel in het venster weer, een waarde van nee, 0 of uit niet. De standaardwaarde is nee. De statusregel in het dialoogvenster is duidelijk een onnodig accessoire. Geen enkele toepassing waarmee de auteur te maken had, deed zulke dingen. Wij ook niet.
onopgesmukt - specificeert of het dialoogvenster een rand, titel, systeemmenu en knoppen voor maximaliseren, minimaliseren en sluiten, of, zoals ze nu zeggen, chroom. Een waarde van ja, 1 of aan geeft de afwezigheid van chroom aan, en een waarde van nee, 0 of uit geeft de aanwezigheid ervan aan. De standaardwaarde is nee. Over het algemeen moet u Chrome alleen verwijderen uit geavanceerde dialoogvensters in vergelijkbare geavanceerde toepassingen. Een raam zonder chroom ziet er uiterst ongebruikelijk uit en kan de gebruiker ontmoedigen.

Na het aanroepen van de methode showModalDialog stopt de uitvoering van het webscript totdat het dialoogvenster wordt gesloten. De uitvoering gaat pas door nadat het venster is gesloten.

Er moet nog iets worden gezegd over het resultaat dat de showModalDialog-methode retourneert. Dit is de waarde die door het dialoogvenster is doorgegeven aan het venster waarin het werd geopend. Deze waarde kan elk type zijn: tekenreeks, getal, booleaanse waarde, array, functie of een instantie van een willekeurig object.

Opmerking:
Aanroepen van de methode showModalDialog kunnen alleen aanwezig zijn in gebeurtenishandlers die optreden als gevolg van gebruikersacties (bijvoorbeeld een klikgebeurtenis). IN anders de aanroep van deze methode wordt genegeerd.

3.2. Sommige gegevens doorgeven aan een modaal dialoogvenster wanneer dit wordt geopend
Heel vaak moet u wat gegevens doorgeven aan het modale dialoogvenster dat wordt geopend. Dit kunnen bijvoorbeeld de huidige waarden zijn van parameters die in de bedieningselementen van dit venster moeten worden vervangen.

We weten al dat we een waarde van elk type aan een modaal dialoogvenster kunnen doorgeven door dit de tweede parameter te maken voor de methodeaanroep showModalDialog.

Window.showModalDialog("opties_modal.html", 2);
Maar wat als we meerdere waarden aan het dialoogvenster moeten doorgeven? Er zijn twee manieren om dit te doen.

Methode één is om een array te maken en de door te geven waarden in de elementen ervan te plaatsen.

Var aParams = waar;
var aParams = "zwart";

Hier hebben we een reguliere aParams-array gemaakt met twee elementen, waaraan waarden zijn toegewezen die aan het dialoogvenster worden doorgegeven.

Wij kunnen creëren en associatieve array(hash):

Var aParams["wrap"] = waar;
var aParams["kleur"] = "zwart";
window.showModalDialog("options_modal.html", aParams);
Misschien is dit handiger: string-hash-indexen zijn gemakkelijker te onthouden dan numerieke indices van een gewone array.

De tweede methode is om een exemplaar van het Object-object te maken met behulp van een JavaScript-initializer, daarin eigenschappen te creëren en de doorgegeven waarden eraan toe te wijzen.

Var oParams = (wrap: waar, kleur: "zwart");
window.showModalDialog("options_modal.html", oParams);
Welke methode u moet kiezen, is een kwestie van smaak. De auteur geeft bijvoorbeeld de voorkeur aan Object-instanties en leest deze als het meest geschikt voor dit doel. En sommigen vinden arrays misschien handiger: gewone of hashes.

3.3. Ontvangst in een modaal dialoogvenster van de gegevens die zijn doorgegeven door het venster dat het opende
Dus hebben we de gegevens doorgegeven aan het modale venster. Nu moeten we ze op de een of andere manier in dit venster zelf krijgen.

Het Window-object ondersteunt een alleen-lezen eigenschap dialogArguments. Het slaat de waarde op die aan het dialoogvenster is doorgegeven als de tweede parameter van de showModalDialog-methode. Precies wat we nodig hebben.

Opmerking:
De eigenschap dialogArguments is alleen beschikbaar in dialoogvensters.

Dit is hoe we de waarden kunnen doorgeven als hash-elementen:

Var aParams = window.dialogArguments;
var bWrap = aParams["wrap"];
var sColor = aParams["kleur"];
En dit zijn de waarden die worden doorgegeven als eigenschappen van een exemplaar van het Object-object:

Var oParams = window.dialogArguments;
var bWrap = oParams.wrap;
var sColor = oParams.color;
3.4. Gegevens doorgeven van een modaal dialoogvenster naar het venster waarin het werd geopend
Het blijft de vraag hoe gegevens in de tegenovergestelde richting kunnen worden overgedragen: van het modale dialoogvenster naar het venster waarin het werd geopend. We zullen hun nieuwe waarden moeten retourneren vanuit het dialoogvenster Parameters, gebruiker gedefinieerde, is het niet?

Elke waarde mag alleen vanuit een dialoogvenster worden doorgegeven aan het venster waarin het werd geopend als de gebruiker op de knop OK klikte. Als u op Annuleren klikt, hoeft u dit meestal niet te doen; Over het algemeen zou de knop Annuleren alleen het dialoogvenster moeten sluiten en geen andere actie moeten uitvoeren.

De gebruiker klikte dus op de knop OK in het dialoogvenster. Nu moeten we wat gegevens doorgeven aan het venster van waaruit het dialoogvenster werd geopend. Hoe je dat doet?

Het Window-object ondersteunt een returnValue-eigenschap. Deze eigenschap slaat de waarde op die moet worden doorgegeven van het modale dialoogvenster naar het venster waarin het werd geopend. Deze waarde kan van elk type zijn.

Opmerking:
De eigenschap returnValue is alleen beschikbaar in modale dialoogvensters.

Dit is bijvoorbeeld hoe we een enkele waarde kunnen doorgeven vanuit het venster dat wordt geopend:

Venster.returnValue = 2;
En dus - verschillende betekenissen:

Window.returnValue = (wrap: bWrap, kleur: sColor);
Natuurlijk kunnen we in dit geval ook een gewone array of hash gebruiken.

Als de gebruiker op de knop Annuleren in het dialoogvenster heeft geklikt, zullen we, zoals eerder overeengekomen, geen waarde toewijzen aan de eigenschap returnValue. In dit geval dit pand krijgt de standaardwaarde - null. Hetzelfde zal overigens gebeuren als de gebruiker het dialoogvenster sluit door op de sluitknop of de + toetsencombinatie te drukken.

Prima! Het dialoogvenster is gesloten (we zullen later zien hoe u het kunt sluiten). Nu zou het venster dat het opende de waarde van de eigenschap returnValue moeten ontvangen. Hoe?

Erg makkelijk. Als resultaat wordt de eigenschapswaarde returnValue geretourneerd door de showModalDialog-methode. Dit werd echter al vermeld in paragraaf 2.1.

We moeten controleren of dit gelijk is nulwaarde. Als dit het geval is, heeft het dialoogvenster geen gegevens verzonden. Anders kunnen we op de een of andere manier de gegevens gebruiken die aan hen zijn doorgegeven in de applicatie.

Var oResult = window.showModalDialog(...);
if (oResultaat != nul) (
var bResultWrap = oResult.wrap;
var sResultColor = oResultaat.kleur;
}
3.5. Een modaal dialoogvenster sluiten
Ten slotte moeten we eigenlijk het modale dialoogvenster sluiten. Om dit te doen, kunnen we de close-methode van het Window-object gebruiken, die geen parameters accepteert en geen resultaat retourneert.

Venster.close();
3.6. HTML-applicatie met ondersteuning voor modale dialogen
Welnu, het is tijd voor pure oefening. Laten we onze HTML-teksteditor voltooien, zodat deze het instellen van parameters met behulp van een modaal dialoogvenster ondersteunt.

De code van de HTML-applicatie zelf (het Textedit_modal.hta-bestand) zal er na de correcties als volgt uitzien:

Teksteditor

venster.resizeTo(710, 490);

Var bWrap = waar;
var sColor = "zwart";

Functie showParameters()
{
var oParams = ( wrap: bWrap, kleur: sColor );
var oResult = window.showModalDialog("options_modal.html", oParams,
"dialogHeight:120px;dialogWidth:200px;scroll:nee");
if (oResultaat != nul) (
bWrap = oResultaat.wrap;
sColor = oResultaat.kleur;
var oTxtText = document.getElementById("txtText");
oTxtText.wrap = bWrap? "zacht" : "uit";
oTxtText.style.color = sKleur;
}
}

Hier is alles ons in principe al bekend. Er is slechts minimale uitleg nodig.

Allereerst hebben we twee variabelen gedeclareerd - bWrap en sColor - die de huidige waarden van de applicatieparameters zullen opslaan. De eerste variabele slaat een logische waarde op - een indicatie of het bewerkingsgebied wordt uitgevoerd dit moment lijnomwikkeling. En de tweede variabele slaat de huidige waarde van de tekstkleur in het bewerkingsgebied op als een tekenreeks.

Opmerking:
Over het algemeen kunnen de huidige waarden van de parameters nergens worden opgeslagen, maar telkens worden verkregen uit de overeenkomstige eigenschappen van de instantie van het HTMLTextAreaElement-object, dat het bewerkingsgebied vertegenwoordigt waar de tekst wordt ingevoerd. De auteur besloot eenvoudigweg de applicatiecode niet te ingewikkeld te maken.

Een bewerkingsgebied wordt vertegenwoordigd door een exemplaar van een HTMLTextAreaElement-object. Dit object ondersteunt de eigenschap wrap, die de modus voor regelterugloop specificeert. De waarde 'zacht' van deze eigenschap instrueert het bewerkingsgebied om regeleinden uit te voeren, en regeleinden en regeleinden worden niet ingevoegd bij de regeleinden ('zachte' regeleinden). En de waarde "uit" vertelt het bewerkingsgebied dat de lijnen helemaal niet mogen worden onderbroken.

Alle objecten die webpagina-elementen vertegenwoordigen, ondersteunen de stijleigenschap. Deze eigenschap slaat een exemplaar op van het CSSStyle-object dat de current CSS-stijl, die gebonden is aan een bepaald webpagina-element.

Het CSSStyle-object ondersteunt op zijn beurt vele eigenschappen die overeenkomen met verschillende stijlkenmerken. De eigenschap color komt dus overeen met het gelijknamige attribuut style, dat de tekstkleur specificeert.

Laten we nu een webpagina maken die het dialoogvenster zelf implementeert. Laten we daar het selectievakje Tekstomloop plaatsen, de vervolgkeuzelijst Tekstkleur en natuurlijk de knoppen OK en Annuleren die nodig zijn voor dit soort vensters.

De code voor deze webpagina vindt u hieronder.

Opties

functie-instelling()
{
var oParams = venster.dialogArgumenten;

OChkWrap.checked = oParams.wrap;
oSelColor.waarde = oParams.color;
}

Functie sendParams()
{
var oChkWrap = document.getElementById("chkWrap");
var oSelColor = document.getElementById("selColor");
window.returnValue = (wrap: oChkWrap.checked, kleur: oSelColor.value);
venster.close();
}

Tekst omwikkelen

Tekst kleur

Zwart
Rood
Groente
Blauw

Ook hier is alles ons al bekend. De meest minimale uitleg is vereist.

Attribuut Taggrootte, waarmee een lijst wordt gemaakt, specificeert de grootte deze lijst in punten. Een waarde van 1 voor dit tagkenmerk geeft aan dat de lijst één item hoog moet zijn, dat wil zeggen dat het een vervolgkeuzelijst moet zijn.

Het VALUE-attribuut van een tag die een afzonderlijk lijstitem aanmaakt, specificeert de waarde van dat item.

Onmiddellijk nadat de webpagina die het dialoogvenster implementeert, is geladen, vindt de laadgebeurtenis plaats. We hebben de setup-functie gespecificeerd als handler voor deze gebeurtenis. Deze functie ontvangt de waarde die aan het dialoogvenster is doorgegeven vanuit het venster waarin het werd geopend: een exemplaar van een object met eigenschappen die de huidige waarden van de applicatie-instellingen opslaan. Daarna zal het deze waarden invoeren in de overeenkomstige bedieningselementen.

Het HTMLInputElement-object, dat een besturingselement vertegenwoordigt, inclusief een selectievakje, ondersteunt een gecontroleerde eigenschap, die alleen beschikbaar is voor selectievakjes. Deze eigenschap geeft aan of het selectievakje is aangevinkt (true) of uitgeschakeld (false).

Het HTMLSelectElement-object, dat een lijst vertegenwoordigt, ondersteunt een waarde-eigenschap. Het bevat de waarde van het momenteel geselecteerde lijstitem als een tekenreeks. Door een waarde aan deze eigenschap toe te kennen, vertellen we de lijst om in eerste instantie een item met die waarde te selecteren.

Wanneer u op de knop OK klikt, wordt de handler voor de klikgebeurtenis uitgevoerd: de functie sendParams. Het zal een exemplaar van een object maken met behulp van een JavaScript-initialisator en de eigenschappen ervan instellen op de waarden die de gebruiker in het dialoogvenster heeft opgegeven - dit worden de nieuwe waarden van de applicatieparameters. Het zal de resulterende instantie van het object doorgeven aan het venster dat dit dialoogvenster heeft geopend, dat wil zeggen aan de toepassing zelf, en vervolgens het dialoogvenster sluiten.

Met de knop Annuleren sluit u eenvoudigweg het dialoogvenster. Als gevolg hiervan krijgt het venster dat dit dialoogvenster heeft geopend de waarde null - een signaal dat de gebruiker de invoer van nieuwe applicatieparameters niet heeft bevestigd.

Laten we deze webpagina opslaan in het bestand options_modal.html. En laten we de voltooide HTML-toepassing in actie bekijken.

Voor veel processen op internet is tegenwoordig toestemming van de gebruiker vereist. Gebruikers moeten bijvoorbeeld mogelijk een account verwijderen, hun naam wijzigen of een geldtransactie bevestigen.

De algemene aanpak in dergelijke gevallen is om een dialoogvenster weer te geven, meestal met twee knoppen; één voor annuleren, de andere voor het uitvoeren van een actie. We doen dit al vele jaren, maar in deze tutorial gaan we het native doen met behulp van een experimentele tag.

Het dialoogelement gebruiken

verscheen in HTML5 (5.1 om precies te zijn). Het is geclassificeerd als een "hoofdsectie"-element, net als elementen, en elk element vormt een nieuw, onafhankelijk inhoudsblok. Je kunt het als een kindelement van het lichaam plaatsen, of het gebruiken als of - beide benaderingen zijn correct.

Ondersteunende browsers (Chrome 37+ en Opera 27+) tonen het element standaard verborgen, waardoor het zichtbaar wordt bij het aanroepen van show() of showModal() , en close() om het weer te verbergen. Normaal gesproken voeren we deze methode uit wanneer de klikgebeurtenis wordt geactiveerd, zoals deze:

Var $accountDelete = $("#delete-account"), $accountDeleteDialog = $("#confirm-delete"); $accountDelete.on("klik", function() ( $accountDeleteDialog.showModal(); )); $("#cancel").on("klik", function() ( $accountDeleteDialog.close(); ));

Verschillen tussen de methoden show() en showModal().

Het is vermeldenswaard dat de methoden show() en showModal() zich verschillend gedragen.

De show() methode opent het dialoogvenster op basis van zijn positie binnen de DOM. Als je het vlak daarvoor hebt toegevoegd, verschijnt het onderaan de pagina. We zouden aangepaste stijlen moeten toevoegen, bijvoorbeeld om het dialoogvenster in het midden van de pagina te plaatsen. Deze stijlen worden doorgaans gebruikt om een element hoger te laten lijken dan andere, door de eigenschap position in te stellen op absoluut, samen met left en top.

De methode showModal() daarentegen toont het element als een modaal venster. Het wordt gecentreerd op de pagina weergegeven, in de bovenste laag geplaatst, zoals in de API op volledig scherm, die overlappingen voorkomt met behulp van z-index. relatieve positionering(relatieve positie) en overloop naar het bovenliggende element.

In de meeste gevallen is het waarschijnlijk dat we showModal() zullen gebruiken in plaats van de show() methode.

Stijlaanpassing

Het dialoogvenster gebruikt standaard browserstijlen, maar deze kunnen, zoals bij de meeste elementen, worden overschreven. U kunt bijvoorbeeld de rand van het dialoogvenster dunner maken, de hoeken rond maken en een schaduw toevoegen.

Wanneer een element wordt weergegeven met behulp van de showModal()-methode, hebben we bovendien een extra pseudo-element::backdrop tot onze beschikking. Dit pseudo-element bevindt zich direct onder het dialoogvenster en bestrijkt de gehele viewport.

Het wordt gebruikt als een transparante donkere achtergrond - klik op de rode knop om het in actie te zien:

Elegantie toevoegen met overgangen

Het aanpassen van dialoogstijlen zou eenvoudig moeten zijn, maar hoe zit het? CSS toevoegen overgang? Hoe zit het met het soepel openen van een venster met behulp van een zoomeffect, net zoals OS X dat doet?

Stap 1

Om te beginnen zullen we het dialoogvenster met 90% verkleinen, een overgang toepassen en het venster uit het zicht verbergen.

Dialoogvenster ( zichtbaarheid: verborgen; transformatie: schaal (0,1); overgang: transformatie 200 ms; )

Stap 2

Nu definiëren we een klasse waarnaar het dialoogvenster zal worden geschaald daadwerkelijke grootte en zichtbaar maken.

Dialog.dialog-scale ( zichtbaarheid: zichtbaar; transformatie: schaal(1); )

Stap 3

Onze truc is om de kleinschalige dialoog een paar milliseconden te "vertragen" voordat de dialoogschaalklasse wordt toegevoegd. Om dit te bereiken, voegen we een klasse toe met behulp van de js setTimeout() methode:

Var-overgang; $accountDelete.on("klik", function() ( $accountDeleteDialog.showModal(); transition = setTimeout(function() ( $accountDeleteDialog.addClass("dialog-scale"); ), 0,5); ));

Stap 4

Vergeet niet deze klasse te verwijderen en de time-out te wissen bij het sluiten van het dialoogvenster.

$("#cancel").on("klik", function() ( $accountDeleteDialog.close(); $accountDeleteDialog.removeClass("dialog-scale"); clearTimeout(transitie); ));

Dat is alles! Het resultaat is te zien in de volgende demo:

Samenvatten

erg handig, maar heeft nog steeds zeer slechte browserondersteuning. Als en wanneer alle grote browsers ondersteuning implementeren, zullen we minder afhankelijk zijn van bibliotheken, zal de inhoud semantischer worden en zullen we standaard methode om modale dialogen weer te geven.

http://caniuse.com/#feat=dialog

Tot die tijd kunt u de polyfil van Google Chrome gebruiken om dit gedrag te simuleren in browsers die dit nog niet ondersteunen.

Na een groot aantal pop-upadvertenties op verschillende sites is de houding tegenover verschillende dialoogvensters enigszins negatief. Alles hangt echter zeker af van het doel waarvoor ze worden gebruikt. Soms is het gebruik ervan noodzakelijk en vereenvoudigt het de gebruikerservaring aanzienlijk.

Voorheen moest u verbinding maken om dialoogvensters te maken jQuery-plug-in zoals Pop Easy, Twitter-bootstrap Modaal of jQuery UI-dialoogvenster. Met HTML 5, dat aanzienlijk qua mogelijkheden is uitgebreid, kunt u het gebruik ervan vermijden door een ingebouwd element te gebruiken met de naam .

Eerder al in 2009 dit onderdeel was al opgenomen in HTML 5, maar werd ervan uitgesloten. Nu is hij weer terug - in een nieuwe vorm.

Elementondersteuning door browsers

Helaas is de ondersteuning momenteel uiterst beperkt. Het kan alleen worden gebruikt in Safari 6.0 en Chrome Canary. In Chrome Canary moet je het echter eerst activeren in de instellingen. Ga hiervoor naar chrome://flags en schakel dit in “Schakel experimentele webplatformfuncties in”.

Interactie met HTMLDialogElement-methoden:

HTMLDialogElement beschikt over de volgende methoden waarmee u met dialoogvensters kunt werken.

show() : Deze methode wordt gebruikt om een dialoogvenster te openen. Het verschil tussen deze methode en de volgende is dat gebruikers, ondanks het geopende dialoogvenster, nog steeds de mogelijkheid hebben om de pagina te gebruiken: ze kunnen er doorheen scrollen, iets kopiëren, links volgen zonder de pagina opnieuw te laden, enz.
showModal() : In in dit geval De gebruiker heeft alleen toegang tot het geopende “modale venster”.
dichtbij() : Deze methode sluit het dialoogvenster. Als ik een beetje vooruitkijk, zal ik zeggen dat je de returnValue-parameter erin kunt doorgeven.

Kenmerken:

HTMLDialogElement bevat de volgende twee attributen.

returnValue: Retourneert de parameter die is doorgegeven aan close() - het is niet nodig om deze op te geven, deze is optioneel.
open: is een Booleaans gegevenstype. Dat betekent dat het slechts twee waarden kan aannemen: waar, in welk geval het dialoogvenster aan de gebruiker wordt getoond, of onwaar, dan is het verborgen.

Evenementen:

De functie die wordt aangeroepen bij het sluiten van de onk ziet er als volgt uit:

dialog.addEventListener("close", function() ( Hier kunt u al code schrijven die moet worden uitgevoerd als het venster gesloten is));

Naast de bovengenoemde methoden en attributen ondersteunt het ook:

formulier: Wordt gebruikt om een formulier te integreren met . Dankzij deze binding werkt het alleen binnen het dialoogvenster.
autofocus attribuut: Nodig om te focussen op invoer in het dialoogvenster.
Gebeurtenis annuleren: Deze gebeurtenis wordt geactiveerd nadat het raam via een sleutel is gesloten "Esc."

Nu je de basis hebt bestudeerd, kun je een praktisch voorbeeld van het gebruik ervan zien.

Syntaxis voor het maken van dialoogvensters

Met dank aan Hevix voor een geweldige les;)

Sluiten Open venster

De code is zo duidelijk en eenvoudig dat ik denk dat er geen uitleg voor nodig is. Wat u moet begrijpen is dat de inhoud van het pop-upvenster zich binnen de tag bevindt en dat de aanroep ervan buiten deze tag moet vallen.

Om de inhoud van het element weer te geven heb je nodig met behulp van JavaScript, namelijk het aanroepen van de methoden .show() en .close(). Ze zijn al eerder genoemd.

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

(functie() (

document. getElementById("showDialog"). onclick = functie () (

dialoog. show();

document. getElementById("closeDialog"). onclick = functie () (

dialoog. dichtbij();

} ) () ;

Alles is klaar. Zoals je kunt zien, hebben we een minimaal aantal regels code gebruikt, wat niet in verhouding staat tot wat er zou gebeuren als we hiervoor een plug-in van derden zouden aansluiten. Wanneer u nu op de knop "Venster openen" klikt, ziet u een dialoogvenster; als u op de knop "Sluiten" klikt, wordt dit verborgen.

Dialoogvensters voor styling

Ik denk niet dat het nodig is om te diep in te gaan op de stijl van dit pop-upvenster met behulp van CSS. Alles is hier heel duidelijk, zelfs zonder mijn hulp. Ik zal alleen de algemene stijl voor de lay-out specificeren.

dialoogvenster (boven: 28%; breedte: 400px; rand: 1px effen rgba(0, 0, 0, 0.3); randradius: 15px; vakschaduw: 0 3px 7px rgba(0, 0, 0, 0.3); border-top: 5px solid #eb9816; ) knop(weergave: inline-block; border-radius: 3px; border: geen; lettergrootte: 0.9rem; opvulling: 0.4rem 0.8em; achtergrond: #eb9816; border-bottom : 1px effen #f1b75c; lettertypegewicht: vet; marge: 0 0,25rem; knop: zweven, knop: focus ( dekking: 0,92; cursor: aanwijzer; )

dialoog(

bovenkant: 28%;

breedte: 400px;

rand: 1px effen rgba (0, 0, 0, 0.3);

randradius: 15px;

vakschaduw: 0 3px 7px rgba (0, 0, 0, 0.3 );

rand bovenaan: 5px effen #eb9816;

knop(

display: inline-blok;

grensradius: 3px;

rand: geen;

lettergrootte: 0,9 rem;

vulling: 0,4rem 0,8em;

achtergrond: #eb9816;

rand-onder: 1px effen #f1b75c;

kleur wit;

lettertypegewicht: vet;

marge: 0 0,25 rem;

tekst uitlijnen: centreren;

knop: zweven, knop: focus (

dekking: 0,92;

cursor: aanwijzer;

Modale dialoogvensters maken

Als u de volledige aandacht van de gebruiker op het pop-upvenster wilt vestigen, is het zinvol om modale dialoogvensters te gebruiken. Hun uitdaging verschilt niet veel van de gebruikelijke. U hoeft alleen maar het JS-bestand .show() te wijzigen in .showModal() . In de HTML hoef je niets te veranderen.

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

(functie() (

var dialoog = document. getElementById("Dialoog");

Het HTML5-dialoogelement biedt functionaliteit in een dialoogvenster op een webpagina. Het dialoogvenster van het dialoogelement bevindt zich in de DOM-boom en kan worden opgemaakt met gewone CSS.

Eenvoudige voorbeelden van het dialoogelement Dialoogvenster! Het dialoogelement zelf toont visueel niets; u moet de JavaScript-API gebruiken om het dialoogvenster te openen en te sluiten. .show() en .close() API Met behulp van de .show() en .close() API's op het dialoog DOM-element kunt u een dialoogvenster openen en sluiten.

Dialoogvenster!

Sluit Dialoogvenster openen! var dialog = document.querySelector("dialoog"); document.querySelector("#show").onclick = function() ( dialog.show(); ); document.querySelector("#close").onclick = function() ( dialog.close(); );

Dialoogvenster!

Sluiten Dialoogvenster openen!

Stijl voor een dialoogvenster U kunt een aangepaste stijl aan het dialoogelement toevoegen op dezelfde manier als aan andere blokelementen: nav, div, footer, etc. dialoogvenster (rand: 1px effen rgba(0, 0, 0, 0.3); randradius: 6px; vakschaduw: 0 3px 7px rgba(0, 0, 0, 0.3); )

Het stylen van een dialoogelement is net zo eenvoudig als het stylen van een div!

Sluiten Dialoogvenster Stijlen openen

Function.showModal()-API

Om een dialoogvenster modaal te maken, moet u de functie .showModal() aanroepen in plaats van .show() . Houd er rekening mee dat u geen tekst kunt selecteren achtergrond of klik op de knop om knoppen in het geopende dialoogvenster te selecteren.

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

Deze laag bevindt zich bovenop andere elementvensters, ongeacht de z-indexwaarden, inclusief eerder geopende modale dialoogvensters.

Indien nodig kunt u het modale dialoogvenster sluiten met de “escape”-toets!

Dichtbij

Voeg een achtergrond toe aan een dialoogvenster

Om de achtergrond met kleur te vullen, kunt u het pseudo-element::backdrop gebruiken.

Dialoogvenster::achtergrond ( positie: vast; boven: 0; links: 0; rechts: 0; onder: 0; achtergrondkleur: rgba(0, 0, 0, 0.8); )

Dim de achtergrond met ::backdrop . Het markeert het dialoogvenster terwijl de rest verborgen blijft!

Sluiten Open dialoogvenster met achtergrond

Waarden retourneren uit een dialoogvenster

U kunt een argument doorgeven aan .close() . Het dialoogvenster keert terug ingestelde waarde eigenschappen.returnValue .

Open een dialoog!

Verzenden Open dialoog! document.querySelector("#close").onclick = function() ( var value = document.querySelector("#return_value").value; dialog.close(waarde); ); document.querySelector("dialoog").addEventListener("close", function() ( alert(this.returnValue); ))

Het dialoogvenster ontvangt een close()-argument. Dit wordt weerspiegeld in .returnValue

Verzenden Dialoog openen Voordelen van het element U kunt er uiteraard gebruik van maken jQuery-bibliotheek of ander JavaScript om dit resultaat te krijgen. Maar dialoog wel HTML-element en u hoeft geen bibliotheken van derden aan te sluiten om een pop-updialoogvenster te maken.

Ook qua toegankelijkheid is het element uitstekend. De browser begrijpt dat het element modaal is, zodat technologieën zoals schermlezers weten welke inhoud interactief moet zijn.

Bovendien worden modale dialogen behoorlijk ordelijk in een "toplaag" -stapel geplaatst en bovenop andere elementen geplaatst, ongeacht de z-index-eigenschappen. Als u op z-index vertrouwt, is het moeilijk om een modale dialoog bovenop webpagina's te plaatsen.

Positie

De dialogen hebben er wat van bijzondere kenmerken positionering. Wanneer u dialog.show() aanroept, wordt het dialoogvenster standaard gecentreerd in de viewport. Natuurlijk kun je dit wijzigen met behulp van reguliere CSS-positionering zoals top: 15px .

En dat moet jij ook weten absolute positionering dialoogvenster, alleen voor het blok dat de initiële container bevat. Daarom begrijpt een absoluut gepositioneerd dialoogvenster zaken als positie, overloop en percentages niet.

De specificatie bevat een positioneringsanker waarmee u het dialoogvenster aan een ander element kunt verankeren. Dit is echter nog niet geïmplementeerd in Chrome.

Open meerdere dialoogvensters

Als dialogen niet modaal zijn, gedragen ze zich als meerdere elementen. Voor modals duwt de browser het dialoogvenster naar de stapel. Bovenaan de stapel bevindt zich een actief modaal dialoogvenster dat de resterende pagina's van het document blokkeert. Telkens wanneer een modaal dialoogvenster wordt geopend, wordt het naar de bovenkant van de stapel geduwd. Telkens wanneer een modaal dialoogvenster wordt gesloten, wordt het van de stapel verwijderd. Dialogen worden in stapelvolgorde weergegeven, dus het actieve dialoogvenster is het hoogst.