Einfaches Erstellen von Modal Window mit HTML5 Dialog

Hallo Welt! 
Lorem ipsum dolor sit amét, consectetur adipisicing elit. Earum, erfinden!
Ausgang 
 Dialog anzeigen 

Beachten Sie jedoch, dass das Dialogfeld ausgeblendet ist, wenn Sie es in Chrome anzeigen (dies ist derzeit der einzige Browser, der dieses Tag unterstützt). Und angesichts der obigen HTML-Struktur sehen wir nur die Schaltfläche "Dialog anzeigen". Um das Dialogfenster .show(), können wir das JavaScript-API .show() und es mit .close() ausblenden.

 (function () {var dialog = document.getElementById ('window'); document.getElementById ('show'). onclick = function () {dialog.show ();}; document.getElementById ('exit'). onclick = function () {dialog.close ();};}) (); 

Klicken Sie auf die Schaltfläche "Show Dialog", und das Dialogfenster wird in der Mitte des Browserfensters angezeigt.

Wir können das Dialogfenster über CSS anpassen. Standardmäßig deckt das Dialogfenster den gesamten horizontalen Bereich im Browser ab. Also, geben wir die Breite an, so.

 Dialog {Breite: 500px; } 

Außerdem,

element kommt mit einem neuen Pseudo-Element namens ::backdrop . Es wird verwendet, um den typischen dunklen Hintergrund zu stylen, den wir normalerweise hinter einem Dialogfenster finden. Dadurch können sich die Besucher mehr auf den Dialog konzentrieren und alles andere dahinter verbergen. Es scheint momentan nicht zu funktionieren, wird aber in Zukunft unterstützt.

Fazit

HTML hat sich in den letzten Jahren so sehr weiterentwickelt. Es ist nicht mehr nur für die Erstellung von Webseiten, wir können jetzt auch interaktive UI mit neuen HTML-Elementen wie

zusammen mit JavaScript-API. Beachten Sie, dass dieses Element experimentell ist und noch nicht für die Produktion bereit ist. Es funktioniert nur in Chrome mit den experimentellen Funktionen, die auf der Seite chrome://flags aktiviert sind.

• Demo anzeigen
• Quelle herunterladen

So erstellen Sie reines CSS onClick Image Zoom-Effekt

CSS hat keine Pseudoklasse für das Targeting von Klickereignissen, und dies ist einer der größten Schwachpunkte von Frontend-Entwicklern. Die am nächsten liegende Pseudoklasse ist :active die ein Element für den Zeitraum formatiert, in dem ein Benutzer seine Maus darüber hält.Dieser Effekt ist jedoch von kurzer Dauer: Sobald der Benutzer die Maus loslässt, : :active funktioniert nicht mehr. Wir mü

(Tech- und Design-Tipps)

So erstellen Sie effektive Popups für Ihren Online-Shop

Popups mögen heutzutage die meistgehassten Dinge auf Websites sein, aber sie sind immens effektiv, wenn es darum geht, Traffic zu generieren und Abonnements für Ihre Website zu erhalten. Hierin liegt ein weiteres Problem: Da einige Popups so beliebt sind, werden sie von Website-Besitzern und Online-Vermarktern überstrapaziert, aber leider werden sie selten richtig konfiguriert .In

(Tech- und Design-Tipps)