HTML-ELEMENTE ERKUNDEN:

DEMO

Einführung

Das Dialogelement wird seit einiger Zeit von allen Browsern weitgehend unterstützt, und ich bin hier, um Ihnen zu zeigen, wie dieses Element die Produktivität und Qualität Ihres Codes erheblich verbessern kann, unabhängig vom verwendeten Framework.

Ich verwende einfaches JavaScript, um zu zeigen, dass Sie nicht viele Codezeilen benötigen, um schöne und einfache Komponenten zu erstellen.
Die Verwendung dieses Elements ist ganz einfach:

<main>
  <dialog>





<pre class="brush:php;toolbar:false">const dialog = document.getElementById('dialog');
const dialogButton = document.getElementById('dialogButton');

dialogButton.addEventListener('click', () => dialog.showModal());

Wie Sie oben sehen können, müssen Sie nur die Referenz des Dialogelements nehmen und eine dieser beiden Funktionen aufrufen:

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

Aber Sie fragen sich vielleicht:

Was ist der Unterschied zwischen diesen beiden Funktionen?

Nun, um das zu verstehen, müssen wir ein wenig über Schichten verstehen und wissen, was die oberste Schicht ist.

Schichten

Lassen Sie mich ein Beispiel für etwas geben, auf das Sie vielleicht schon einmal gestoßen sind, wenn Sie eine Schubladenkomponente verwenden. Sie rufen die Komponente ganz normal in Ihrem HTML-Code auf und sie wird am Ende nicht auf dem gesamten Bildschirm geöffnet, sondern nur in dem Kontext, in dem Sie sie platziert haben. Sie müssen also am Ende Ihre Schublade in index.html platzieren, damit sie im gesamten Ansichtsfenster geöffnet oder ausgefüllt wird Ihr CSS mit Position und Z-Index, um einen überlappenden Kontext zu erstellen.

Durch die Verwendung von Ebenen können Sie dies vereinfachen, aber am Ende verunreinigen Sie dadurch auch ein wenig Ihr CSS-Dokument. Durch die Verwendung von showModal() wird das Dialogelement in dieser obersten Ebene bereits mit einem separaten Kontext geöffnet, ohne dass eine Konfiguration erforderlich ist. Wenn Sie show() verwenden, wird der Dialog in dieser obersten Ebene nicht aufgerufen und Sie können das normale Verhalten des Ansichtsfensters beibehalten.

Die oberste Ebene ist eine „Ebene“, die sich über das gesamte Ansichtsfenster erstreckt und alle von Ihnen oder Ihrem Webbrowser erstellten Ebenen überlagert. Es hilft sehr und vermeidet das berüchtigte übermäßige Bohren von Propellern.

Okay, okay, aber wie style ich dieses Element? Es muss sehr schwierig sein!

Überhaupt nicht! Es ist so einfach wie das Zentrieren eines Div... Vielleicht ein bisschen mehr!

Dialog / Modalitäten

Für eine tiefergehende Stilisierung empfehle ich Ihnen, sich dieses Video von Kevin Powell anzusehen.

Um den Dialog zu gestalten, geben Sie einfach die ID/Klasse in das Element ein und verwenden Sie CSS.

<main>
  <dialog>





<pre class="brush:php;toolbar:false">#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

Wie Sie oben sehen können, habe ich #dialog[open] verwendet, um die Positionierung der Elemente zu ändern. Wenn Sie einen Dialog erstellen, ist die Anzeige standardmäßig deaktiviert.

Dieses Attribut wird nur hinzugefügt, wenn Sie eine der beiden Funktionen aufrufen.
Versuchen Sie daher beim Gestalten eines Dialogelements immer, den Namen Ihrer Klasse/ID und das Attribut zu verwenden, um Anzeigeprobleme zu vermeiden.
Und wie Sie oben sehen können, verfügt der Dialog bereits über einen ::backdrop-Effekt und lässt sich auch sehr einfach ändern.

<main>
  <dialog>





<pre class="brush:php;toolbar:false">const dialog = document.getElementById('dialog');
const dialogButton = document.getElementById('dialogButton');

dialogButton.addEventListener('click', () => dialog.showModal());

Zeigen! Super einfach! Aber wie schließe ich dieses Modal? Wenn ich auf den Hintergrund klicke, passiert nichts!

Los geht's! Standardmäßig verfügt das Element nicht über diese Möglichkeit. Wenn Sie das Modal schließen möchten, müssen Sie die Funktion zum Schließen über eine interne Schaltfläche oder ähnliches aufrufen.

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

Aber wenn Sie diesen Effekt des Schließens durch Klicken nach außen reproduzieren möchten, können Sie eine einfache Funktion verwenden, um die Kanten des Dialogelements zu identifizieren und so festzustellen, ob Sie nach außen geklickt haben oder nicht.

<main>
  <dialog>





<pre class="brush:php;toolbar:false">#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

Das Verhalten sieht so aus:

Ich empfehle Ihnen, sich die Popover-API anzusehen, wenn Sie dies ständig tun möchten.

Mann, das ist hässlich! Meine Bibliothek ist bereits animiert!

Mach dir darüber keine Sorgen! Fügen wir eine einfache Einblendanimation hinzu.

#dialog[open]::backdrop {
  background: rgba(255, 0, 0, 60%);
}

Das Hinzufügen der Ausblendanimation ist etwas schwieriger, da Sie nicht erkennen können, wann der Benutzer das Modal schließen wird. Daher müssen wir eine Änderung an unserer Skriptdatei vornehmen.

dialog.close();

Zwei wichtige Dinge wurden getan:

1. Ein neuer Parameter wurde hinzugefügt, um die Dauer der Animation zum Schließen des Modals zu bestimmen (nach einigem Suchen habe ich dieses Video von Kevin Powell gefunden).

2. Ich habe ein Attribut namens „Schließen, wenn der Benutzer klickt“ hinzugefügt. Es wird mit dem oben genannten Zeitparameter entfernt.
   

/** @type {HTMLDialogElement} */
const dialog = document.getElementById('dialog');

/**
 * Adds a close behavior to clicking outside dialog element
 * @param {HTMLDialogElement} dialogRef - The refer to element Dialog.
 * @example
 * const dialog = document.querySelector('#dialog');
 * closeDialogClickingOutside(dialog)
 */
 const closeByClickingOutside = (dialogRef) => {
  dialogRef.addEventListener('click', (ev) => {
    if (
      ev.offsetX < 0 ||
      ev.offsetX > ev.target.offsetWidth ||
      ev.offsetY < 0 ||
      ev.offsetY > ev.target.offsetHeight
    ) {
      dialogRef.close();
    }
  });
};

closeByClickingOutside(dialog);

Und da haben wir unseren vollständig animierten Dialog ohne Bibliotheken!

Das ist schön! Aber wie hat man aus diesem Element eine Schublade gemacht?

Nun, um dies zu erreichen, müssen wir die Standardstile des Dialogelements übernehmen und sie überschreiben...

Schublade

Die Schublade öffnet sich in voller Höhe über dem Bildschirm. Also lasst uns ein neues Schubladenelement von Grund auf erstellen.

<main>
  <dialog>





<pre class="brush:php;toolbar:false">const dialog = document.getElementById('dialog');
const dialogButton = document.getElementById('dialogButton');

dialogButton.addEventListener('click', () => dialog.showModal());

Es ist wichtig zu beachten, dass Sie die standardmäßige maximale Höhe des Dialogs überschreiben müssen, um die Schublade auf die volle Höhe des Bildschirms einzustellen!

dialogButton.addEventListener('click', () => dialog.showModal());
dialogButton.addEventListener('click', () => dialog.show());

Jetzt ist es ganz einfach: Fügen Sie einfach die Animationen mit derselben Funktion hinzu, die Sie im Schritt-für-Schritt-Dialog erstellt haben, und schon sind Sie fertig!

<main>
  <dialog>





<pre class="brush:php;toolbar:false">#dialog {
  border: none;
  width: 20rem;
  height: 20rem;
  border-radius: 1.69%; /* NICE! */
}

#dialog[open] {
  /* OMG! I know how to center a div */
  display: flex;
  justify-content: center;
  align-items: center;
}

#dialog[open]::backdrop {
  background: rgba(255, 0, 0, 60%);
}

<dialog>



<p><img src="https://img.php.cn/upload/article/000/000/000/173086397449699.jpg" alt="EXPLORING HTML ELEMENTS: <DIALOG>"></p>

<h2>
  
  
  Vielen Dank fürs Lesen
</h2>

<p>Dies ist mein erster Beitrag hier. Vielen Dank fürs Lesen. Wenn ich in irgendeiner Weise geholfen habe, empfehle ich Ihnen, mir auf LinkedIn zu folgen. Meine Muttersprache ist Portugiesisch, daher sind die meisten meiner Beiträge auf Portugiesisch, aber ich versuche, etwas zu posten auch auf Englisch. Ich beabsichtige, von nun an ähnliche Dinge zu posten. Wenn Sie Empfehlungen zur Verbesserung dieser Modal- und Schubladenstrategie haben, können Sie sie mir dort senden.</p>


          

            
        

Das obige ist der detaillierte Inhalt vonHTML-ELEMENTE ERKUNDEN: