de.hideout-lastation.com
Paradies Für Designer Und Entwickler


Einfaches Erstellen von Modal Window mit HTML5 Dialog

Das modale Fenster ist eine der häufigsten Oberflächen, die wir in Websites finden können. Es wird häufig verwendet, um ein Abonnementformular zu führen, Formulare hochzuladen (wie das in WordPress), Benachrichtigungen anzuzeigen und andere Möglichkeiten, die Aufmerksamkeit eines Besuchers auf etwas Wichtiges zu lenken.

Die ganze Zeit verwenden wir jQuery-Plugins wie jQuery UI Dialog, Twitter Bootstrap Modal oder Popeasy, um eines zu erstellen. Aber HTML5 hat ein neues Tag namens namens eingeführt

Dadurch können wir viel einfacher ein systemeigenes modales Fenster erstellen.

Dialogelement verwenden

Verwendung der

Element ist das gleiche wie wir andere HTML-Elemente verwenden. Wir fügen einfach den Inhalt hinzu, den wir im Dialogfenster anzeigen möchten.

Hallo Welt!

Lorem ipsum dolor sit amét, consectetur adipisicing elit. Earum, erfinden!

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

Stripe Checkout - Web und Mobile Payment Der einfache Weg

Stripe Checkout - Web und Mobile Payment Der einfache Weg

Wenn Sie sich mit E-Commerce beschäftigen und Stripe noch nicht testen können, dann haben Sie eine der einfachsten Möglichkeiten, online Zahlungen zu erhalten. Stripe kümmert sich um den Zahlungsprozess, ohne dass eine komplexe Codierung erforderlich ist . Vor einiger Zeit hat Stripe ein brandneues Zahlungsformular veröffentlicht: Checkout. Es

(Tech- und Design-Tipps)

Mit Instagram können Sie jetzt Ihren älteren Beitrag archivieren

Mit Instagram können Sie jetzt Ihren älteren Beitrag archivieren

Fast jeder hat ein Bild auf Instagram hochgeladen, auf das er nicht besonders stolz ist. Für diejenigen von euch, die häufig peinliche Fotos auf ihren Instagram-Accounts posten, wird ein bald erscheinendes Update der Instagram-App sie bald verstecken, anstatt sie direkt über eine eingebaute Archivfunktion zu löschen .Jet

(Tech- und Design-Tipps)