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

Produktivitätstipps und Web-Apps für Designteams

Unabhängig davon, ob Sie ein hochwertiges Tool zur Unterstützung Ihrer Webdesign-Aktivitäten suchen, eines, das Ihre Anforderungen an Projektmanagement und Zusammenarbeit erfüllt, oder eines, das beiden Zwecken dient, brauchen Sie nicht weiter zu suchen.Wir haben in diesem Post sieben der besten Web-Apps aufgelistet, die auf dem Markt verfügbar sind. Ein

(Tech- und Design-Tipps)

20 schöne UI & UX Designer Portfolios für Inspiration

Eine moderne Welt braucht neue Regeln, und ohne eine persönliche Portfolio-Website kann man kein erfolgreicher Grafikdesigner sein. Selbst wenn es um eine mobile Benutzeroberfläche oder Benutzererfahrung geht, ohne die Fähigkeit, Ihre Fähigkeiten zu präsentieren, werden Sie Schwierigkeiten haben, Kunden zu gewinnen.In d

(Tech- und Design-Tipps)