Beherrschen des HTMLlt;dialog>-Elements: Eine native Lösung für Modals

<dialog id="my-dialog"> <div class="content"> <form method="dialog"> <p>Form inside a dialog</p> <div> <label for="name">Name: </label> <input type="text" id="name" name="name" /> </div> <menu> <button type="submit">Submit</button> <button type="button">Cancel</button> </menu> </form> </div> </dialog> <button class="open-btn">Open Dialog</button>

Erklärung: Wir haben darin eine eingebettete Form erstellt. Das Formular fragt nach einem Namen (da das Benennen von Dingen natürlich der schwierigste Teil der Programmierung ist). Wir haben zwei CTAs hinzugefügt – einen zum Absenden des Formulars und einen zum Abbrechen. Kinderleicht.

Lassen Sie uns die Sichtbarkeit des Dialogs umschalten:

Dialoge sind standardmäßig ausgeblendet (d. h. sie sind ausgeblendet), aber keine Angst! Mit ein wenig JavaScript können wir sie in die Tat umsetzen! Hier ist der Zauberspruch:

<script>
   const dialog = document.getElementById(" my-dialog function showdialog dialog.showmodal closedialog dialog.close>



</p>
<p><strong>Erläuterung</strong>: Wir verwenden querySelector, um unseren Dialog auszuwählen. Dann schreiben wir zwei Funktionen – eine zum Öffnen des Dialogs und eine zum Schließen. Einfach so – der Dialog öffnet und schließt sich auf Ihren Befehl!</p>

<p><strong>HTML-Code in Aktion:</strong><br>
</p>

<pre class="brush:php;toolbar:false"><dialog id="my-dialog" open="true">
   <div class="content">
     <form method="dialog">
       <p>Form inside a dialog</p>
       <div>
         <label for="name">Name: </label>
         <input type="text" id="name" name="name" />
       </div>
       <menu>
         <button type="submit">Submit</button>
         <button type="button" onclick="closeDialog()">Cancel</button>
       </menu>
     </form>
   </div>
</dialog>
<button class="open-btn" onclick="showDialog()">Open Dialog</button>

Erklärung:

1. Wir haben closeDialog() an die Schaltfläche „Abbrechen“ angehängt.
2. Die Schaltfläche „Öffnen“ verwendet showDialog(), um den Dialog zu öffnen.

Jetzt weiß ich, was Sie denken: „Aber was ist, wenn der Benutzer außerhalb des Formulars (auf den Hintergrund) klickt?“ Mach dir keine Sorgen – ich stehe hinter dir!

Schließen wir den Dialog, wenn wir auf den Hintergrund klicken:

dialog.addEventListener("click", function (event) {
     if (event.target === dialog) {
       closeDialog();
     }
});

Erklärung: Wir haben dem Dialog selbst einen Ereignis-Listener hinzugefügt, der den Dialog schließt, wenn auf den Hintergrund geklickt wird. Die Inhaltsabteilung ist unser Schutz – wenn Sie hineinklicken, bleibt der Dialog erhalten. Aber draußen klicken? Puh! Es ist weg.

Zeit, den Dialog zu gestalten:

Hier finden Sie einige grundlegende Gestaltungsmöglichkeiten, um Ihr Dialogfeld aufzupeppen. Wir werden auch etwas Hintergrundtransparenz für diesen eleganten modalen Look hinzufügen, damit er nicht alles um ihn herum überschattet.“

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

#root {
  width: 100vw;
  height: 100vh;
  display: grid;
  place-items: center;
}

#my-dialog {
  top: 50%;
  left: 50%;
  width: 60vw;
  position: absolute;
  border-radius: 10px;
  transform: translate(-50%, -50%);
}

#my-dialog .content {
  padding: 28px;
}

#my-dialog .content form {
  gap: 16px;
  display: flex;
  flex-direction: column;
}

dialog::backdrop {
  opacity: 0.5;
  background-color: #898989;
}

.open-btn {
  padding: 5px 10px;
}

Probieren Sie es selbst aus! ?

Möchten Sie den Dialog in Aktion sehen? Schauen Sie sich diese Code-Sandbox an:

? Klicken Sie hier, um die Code-Sandbox zu öffnen!

Sie können mit dem Code herumspielen, ihn optimieren und die Magie live beobachten. ?✨

Fazit:

Das ist es! Sie beherrschen jetzt das HTML5-Element. Egal, ob Sie ein Popup, eine Eingabeaufforderung oder ein vollständiges Formular erstellen möchten, das Tag ist Ihr neuer bester Freund.

Aber bevor Sie loslegen, hier ein Profi-Tipp: Sie sollten eine wiederverwendbare Dialogkomponente für Ihr gesamtes Projekt erstellen.

Hey, vergiss nicht, diesen Beitrag zu liken, zu teilen und ihm etwas Liebe zu zeigen, wenn er dir das Leben leichter macht.

Viel Spaß beim Codieren!

Das obige ist der detaillierte Inhalt vonBeherrschen des HTMLlt;dialog>-Elements: Eine native Lösung für Modals. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!