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

15 Lightbox-Bibliotheken für die mobile Reaktionsfähigkeit

15 Lightbox-Bibliotheken für die mobile Reaktionsfähigkeit

Lightbox ist eine beliebte Möglichkeit, Bilder im Web zu überlagern . Wenn Sie auf ein Bild klicken, wird die Lightbox mit einer Art von Animation angezeigt und der Hintergrund wird abgedunkelt, sodass Sie sich auf das Bild selbst konzentrieren können. Das Bild ist auch größer im Maßstab. Die beliebtesten Lightbox-JavaScript-Bibliotheken, die wir seit Jahren kennen, ermöglichen es Ihnen, dies auf dem Desktop zu tun, aber nicht so sehr auf mobilen Plattformen.Dies z

(Tech- und Design-Tipps)

9 Google Fotos-Funktionen, die Sie kennen müssen

9 Google Fotos-Funktionen, die Sie kennen müssen

Google Fotos war wahrscheinlich eine der aufregendsten Ankündigungen in Google I / O 2015. Google Fotos ist ein kostenloses Fotoverwaltungssystem und bietet unbegrenzten Speicherplatz für hochauflösende Bilder (maximal 16 MP) und Videos (maximal 1080p). Google Fotos ist als iOS-, Android- und Desktop-App verfügbar, mit der Sie Bilder und Videos von Ihren Mobilgeräten, PCs, Kameras oder SD-Karten synchronisieren können.Ich v

(Tech- und Design-Tipps)