Verwenden Sie native HTML5-Dialogelemente und erstellen Sie ganz einfach modale Komponenten

Der HTML 5.2-Entwurf fügt ein neues Dialogelement hinzu. Aber es ist eine experimentelle Technik.

Wenn wir bisher irgendeine Art von modalem Dialog oder Dialogfeld erstellen wollten, mussten wir einen Hintergrund und eine Schaltfläche zum Schließen haben, Ereignisse im Dialogfeld binden, unser Markup auf eine bestimmte Weise anordnen und einen Weg finden, die Nachricht weiterzugeben reden...es ist wirklich kompliziert. Das Dialogelement löst alle oben genannten Probleme.

Das Folgende ist die HTML-Struktur einer Bootstrap-Modalbox:

 <!-- Schaltfläche löst modale Box aus--><button class=btn btn-primary btn-lg data-toggle=modal data-target=#myModal> Demonstration der modalen Box starten</button><!-- Modal Box (Modal ) --><div class=modal fade id=myModal tabindex=-1 role=dialog aria-labelledby=myModalLabel aria-hidden=true> <div class=modal-dialog> <div class=modal-content> <div class=modal-header> <button type=button class=close data-dismiss=modal aria-hidden=true> &times; <h4 class =modal-title id=myModalLabel> Modaler Titel</h4> </div> <div class=modal-body> Fügen Sie hier etwas Text hinzu</div> <div class=modal-footer> <button type=button class=btn btn-default data-dismiss=modal>Schließen</button> <button type=button class=btn btn-primary>Änderungen senden</button> </div> </div><!-- /.modal-content --> </div><!-- /.modal --></div>

Das Folgende ist die HTML-Struktur einer nativen modalen Box:

 <!-- Schaltfläche löst modales Feld aus--><button type=button class=btn>Modalfeld anzeigen</button><!-- Modalfeld--><dialog open> HTML5 natives modales Feld</dialog>

Wir haben das einfachste Markup eines Dialogelements gesehen, und Sie haben vielleicht bemerkt, dass open ein Attribut im obigen Dialog ist. Das Hinzufügen dieses Attributs zu einem Element führt dazu, dass das Dialogfeld angezeigt wird. Andernfalls wird es entfernt. Der Dialog wird auch absolut auf der Seite positioniert.

Das Bild oben zeigt einen einfachen modalen Boxstil.

Öffnen Sie den Browser und Sie können sehen, dass sein Grundstil wie folgt aussieht:

 dialog { display: absolute; right: 0px; width: -webkit-fit-content: black; border-style: solid; border-color: initial; padding: 1em;

Das Dialogelement führt außerdem eine neue Pseudoklasse selector::backdrop ein. Der über den Browser angezeigte Standardstil ::backdrop ist wie folgt:

 dialog::backdrop { position: behoben; rechts: 0px; unten: 0px;

Wir können das Dialogelement wie jedes HTML-Element formatieren, und fast jeder CSS-Stil reicht aus. Über den Pseudoklassenselektor ::backdrop können wir damit den Stil des Hintergrunds festlegen.

Zum Beispiel:

 dialog{ margin-top:250px; height:250px; border-radius: 0 0 15px lightgray; :backdrop { Hintergrund: rgba(schwarz, .5);}

Der obige Stileffekt ist wie folgt:

Unten sehen Sie ein einfaches Dialogfeld, in dem optisch nichts angezeigt wird, da das Attribut „Öffnen“ nicht festgelegt ist. Sie müssen die JavaScript-API verwenden, um es anzuzeigen/auszublenden:

 <dialog>Dies ist ein Dialogfeld! </dialog>

Die APIs .show() und .close() des Dialogelements dienen zum Anzeigen bzw. Schließen des Dialogfelds. Mithilfe dieser beiden APIs für das DOM-Element können Sie das Dialogfeld anzeigen und schließen.

Zum Beispiel:

 <!-- HTML --><dialog> <p>Dies ist ein Dialogfeld! </p> <button id=close>Dialogfeld schließen</button></dialog><button id=show>Dialogfeld anzeigen</button> <!-- script --> <script> var dialog = document. querySelector(dialog); document.querySelector(#show).onclick = function(){ dialog.show( }; };</script>

Sie können einen Parameter an dialog.close() übergeben. Durch Abhören des Schließereignisses des Dialogelements gibt die Eigenschaft dialog.returnValue den angegebenen Wert zurück.

wie:

 <!--HTML--><dialog> <p>Dies ist ein Dialogfeld! </p> <p><input type=text id=return_value value= placeholder=Bitte Inhalt eingeben/></p> <button id=close>Dialogfeld schließen</button></dialog><button id=show >Dialogfeld anzeigen</button><!--script--><script> var dialog = document.querySelector(dialog); document.querySelector(#show).onclick = function(){ dialog.showModal(); }; document.querySelector(#close).onclick = function(){ var val = document.querySelector(#return_value); //Hören Sie sich den Dialog an Element-Schließereignis dialog.addEventListener(close, function(){ alarm(this.returnValue); });</script>

Eine weitere API zum Anzeigen von Dialogfeldern ist .showModal()

Wenn Sie nicht möchten, dass der Benutzer mit anderen Seitenelementobjekten als dem Dialogfeld interagiert, verwenden Sie .showModal(), um das Dialogfeld zu öffnen, anstatt .show(). Das mit .showModal() geöffnete Dialogfeld verfügt über eine durchsichtige Hintergrundebene, die den Benutzer daran hindert, mit Seitenelementobjekten außerhalb des Dialogfelds zu interagieren. Gleichzeitig wird das Dialogfeld in der Mitte des Fensters angezeigt standardmäßig (oben, unten, links und rechts zentriert) ); und das mit .show() geöffnete Dialogfeld wird standardmäßig oben im Fenster angezeigt (zentrierte Anzeige kann über CSS erreicht werden).

Nach dem Schließen des Dialogfelds löst Schließen ein Ereignis aus. Darüber hinaus kann der Benutzer das modale Dialogfeld durch Eingabe der Escape-Taste schließen. Dadurch wird das Abbruchereignis ausgelöst, das Sie mit event.preventDefault() abbrechen können.

Sie können form[method=dialog] verwenden, um ein Formular mit einem <dialog>-Element zu integrieren. Nachdem das Formular gesendet wurde, wird das Dialogfeld geschlossen und dialog.returnValue auf den Wert der verwendeten Schaltfläche „Senden“ gesetzt.

Darüber hinaus können Sie die Eigenschaft „Autofokus“ verwenden, um den Fokus automatisch auf die Formularsteuerelemente im Dialogfeld zu richten, wenn dieses angezeigt wird.

Zum Beispiel:

 <!--HTML--><dialog id =dialog> <form method =dialog> <p>Sind Sie mit den Nutzungsbedingungen einverstanden? </p> <p><textarea class =form-control deaktiviert>Bedingungen erfordern...</textarea></p> <button type =submit value =Yes>Ja</button> <button type =submit value = Kein Autofokus>Nein</button> </form></dialog><button id=show>Formulardialog anzeigen</button><!--script--><script> var dialog = document.querySelector(dialog) ; document.querySelector(#show).onclick = function(){ dialog.showModal(); //Abhören des Schließereignisses des Dialogelements dialog.addEventListener(close, function(e){ if(this.returnValue = == Ja){ Alert(this.returnValue) //dosomething... }else{ Alert(this.returnValue) //dosomething... });</script>

Unter den Desktop-Browsern unterstützt nur Google Chrome die volle Funktionalität von Dialog (zum Zeitpunkt dieses Blogbeitrags verwenden Sie bitte Dialog-Polyfill).

<iframe src=//caniuse.com/dialog/embed scrolling=noallowtransparency=trueallowfullscreen=trueframeborder=0></iframe>

Referenzartikel: Demonstration von Dialogelementen

„normaljs“-Funktionsbibliothek: https://github.com/JofunLiang/usuallyjs

Das Obige ist der gesamte Inhalt dieses Artikels. Ich hoffe, dass er für das Studium aller hilfreich ist. Ich hoffe auch, dass jeder das VeVb Wulin Network unterstützt.