Die versteckte modale Fenstertechnik ist eine großartige Lösung für den Umgang mit Oberflächenelementen, die auf der Seite nicht besonders erforderlich sind. Soziale Netzwerke können modale Fenster für private Nachrichten und Formulare verwenden, die nur von Mitgliedern der Website verwendet werden. Dies gilt auch für Blogs und Magazine, bei denen die Autor-Login-Seite von der Hauptwebsite getrennt ist. Modale Fenster sind viel einfacher als das Erstellen neuer Fenster in JavaScript, da alles in demselben Fenster mit HTML-Markup angezeigt wird, das bereits auf der Seite verwendet wird.
Ich möchte zeigen, wie wir ein benutzerdefiniertes modales Fenster erstellen können, das auf dem jQuery-Plugin leanModal basiert. Das Plugin ist vollständig Open Source und kann kostenlos unter der MIT-Generallizenz verwendet werden. Ich mag dieses Plugin mehr als andere, weil es uns einfach die "nackten Grundlagen" gibt. ohne zu viel Anpassung. Dies lässt Raum, um das modale Fenster über CSS zu aktualisieren und einige zusätzliche Parameter in jQuery zu verwenden.
Live Demo - Quellcode herunterladen
Fertig machen
Zuerst habe ich zwei Dateien mit dem Namen? Index.html? und? style.css? die alle Demo-Code enthalten. In diesem Verzeichnis habe ich einen weiteren Ordner namens / js / angelegt, der zwei Dokumente enthalten wird. Die erste ist die neueste Mini-jQuery-Bibliothek und die zweite ist die Plugin-Datei mit dem Namen leanModal jquery.leanModal.min.js.
Nun kann es eine Überraschung sein zu erfahren, dass wir kein Standard-CSS-Stylesheet hinzufügen müssen! Dies liegt daran, dass unser leanModal-Plugin nur sehr grundlegende JS-Funktionen bereitstellt. Alles andere ist auf eine bloße Vorlage reduziert. Wir müssen jedoch einen CSS-Block überschreiben, der den dunklen Overlay-Effekt implementiert. Dies wird direkt von der Plugin-Website kopiert, die ich meinem Standard-Stylesheet hinzugefügt habe.
Der Überlagerungsbereich wird in Höhe und Breite von 100% über der Seite angezeigt. Dann fügt jQuery das anvisierte modale div hinzu, das über allen anderen Elementen im HTML-Code angezeigt wird. Mein Körperinhalt ist bemerkenswert leer. Das einzige wichtige Element ist der Umschaltknopf zum Anzeigen dieses modalen Fensters. Aber lassen Sie uns einen Blick in das HTML-Formular werfen, das im eingebettet ist #loginmodal div.
Notiz, die ich aufgenommen habe Anzeige: keine; als einzelne Inline-CSS-Eigenschaft. Wir müssen dieses div zwingen, keine Anzeige zu haben, so dass leanModal () es in die Seite einblenden und als Blockelement anzeigen kann. Ich verwende eine sehr einfache Formularanzeige mit ähnlichen Stilen wie dieses CSS-Formular. Das hellblaue Design funktioniert gut im Gegensatz zur dunkleren Schattenüberlagerung. Außerdem können CSS3-Übergangseffekte auf die Eingabefelder angewendet werden.
Ein weiteres wichtiges Seitenelement ist die Schaltfläche "Senden". Da dieses Formular keine Daten an den Server sendet, möchten wir das modale Fenster nur ausblenden, wenn der Benutzer es übermittelt. Ich habe die Klasse hinzugefügt hidemodal die wir innerhalb der jQuery-Methode einrichten können. Es stoppt die Standardformularübergabe und zeigt dieses modale Fenster als rein ästhetischen Effekt an.
CSS-Layoutstile
Mein CSS-Dokument enthält alle typischen Seitenrücksetzungen, die wir benötigen, sowie einige Typografie- und Schaltflächenstile. Das zentrierte Anmeldemodalfenster enthält einen neuen Schaltflächenstil, der das andere flache Design nachahmt. Zum Glück gibt es jedoch nicht zu viele eindeutige CSS-Eigenschaften, die einer weiteren Erklärung bedürfen. Sie sollten in der Lage sein, ohne großen Aufwand Ihre eigenen modalen Fensterstile zu erstellen.
Ich denke, die wichtigsten Elemente, die zu erkennen sind, sind die Container für den Overlay-Effekt und das modale Fenster. Ich habe diese nach unten in das Stylesheet verschoben, gruppiert mit allen anderen modalen Fenstereigenschaften. Ich habe das modale Fenster auf eine Breite von 300px beschränkt, da für dieses Beispiel nur ein Formular mit 2 Eingaben erforderlich ist. Denken Sie jedoch daran, dass leanModal keine Standardstile für Ihr Fenster erzwingt, sodass das Design zu 100% in Ihren Händen liegt.
Jedes der Textfelder hat einen Übergangsanimationseffekt für die Rahmen- und Rahmenschatten. Auch die Textfarbe wird ausgeblendet, wenn Sie zwischen den beiden Eingaben wechseln. Ich habe ein helleres blaues Farbschema gewählt und die Schaltflächeneffekte mit den Eingabefeldern abgeglichen. Es gibt viele CSS3-Eigenschaften zusammen mit ihren Herstellerpräfixen, so dass dieses Formular mehr auf neuere Rendering-Engines ausgerichtet ist. Es sollte jedoch in allen gängigen Browsern korrekt angezeigt werden.
Modaler Effekt in jQuery
Leider ist CSS3 nicht an einem Punkt, an dem wir uns darauf verlassen können, dass bei einem Klickereignis verschiedene Fenster ein- / ausgeblendet werden können. Und es gibt keine Garantie, dass dies auch jemals möglich sein wird. Bei modalen Fenstern, die einen Shadowbox-Effekt verwenden, ist es viel einfacher, sich an JavaScript zu halten. Glücklicherweise benötigt das leanModal-Plugin nur eine einzige Zeile JS, um es zu aktivieren. Ich habe den folgenden Code unmittelbar vor meinem Schließen hinzugefügt Etikett.
Der erste kleine Codeblock wird überprüft, wenn der Benutzer "Anmelden" drückt. und versucht, das Formular abzusenden. Wir verwenden die JavaScript-Schlüsselwörter falsch zurückgeben das Ereignis zu stoppen, bevor es ausgelöst wird. Weitere Informationen zu dieser Methode finden Sie unter Stack Overflow. Jetzt brauchen wir nur noch die letzte Codezeile, um das modale Fenster zum Laufen zu bringen.
Wenn wir keine Parameter anpassen müssen, dann nur die Zeile $ ('# modaltrigger'). leanModal () sollte großartig funktionieren. Für diese Demo möchte ich jedoch die 3 optionalen Variablen präsentieren, die Sie in die Funktion übergeben können. Zuerst fügen wir den Versatzwert oben im Fenster hinzu, um diesen neuen modalen Rahmen zu positionieren. Dann wird ein Wert von 0,0-1,0 verwendet, um die Hintergrunddeckkraft zu markieren.
Und schließlich können wir einen neuen jQuery-Selektor für die Schaltfläche "Schließen" hinzufügen. Dies kann eine Klasse oder eine ID sein oder eine Mischung, die HTML-Attributselektoren enthält. Für mein Beispiel verwenden wir dieselbe Klasse, die ich dem Login-Button hinzugefügt habe hidemodal. Auf diese Weise sollte das modale Fenster bei jedem Drücken der Senden-Schaltfläche ausgeblendet werden.
Damit das Formular tatsächlich funktioniert, müssen Sie diese Klasse von der Schaltfläche entfernen und den Block des JavaScript-Codes vor der Funktion leanModal () entfernen. Dann wird das Formular ordnungsgemäß übermittelt und der Benutzer sollte auf eine neue Seite umgeleitet werden. Sie sollten jedoch viele verschiedene Ideen ausprobieren und sehen, welche Arten von Inhalten in einer modalen Anzeige gut funktionieren.
Live Demo - Quellcode herunterladen
Abschließende Gedanken
Der modale Fenstereffekt kann in weit mehr Situationen als nur Anmeldeformularen verwendet werden. Sie müssen über verschiedene Elemente der Benutzeroberfläche einer Webseite nachdenken und überlegen, welche Elemente in ihrem eigenen Fenster nützlicher sind. Dies betrifft spezielle Formulare oder längere detaillierte Inhalte, die nicht von jedem Besucher anerkannt werden.
Bitte schauen Sie sich meine Live-Beispiel-Demo an und erfahren Sie, wie wir diesen leanModal-Effekt mit Standard-HTML-Blöcken implementieren können. Jeder, der Grundkenntnisse in CSS hat, sollte kein Problem haben, meine Standardstile anzupassen. Es gibt so viele Verwendungsmöglichkeiten für diese Funktionalität, dass sie der Fantasie am besten überlassen werden. Ich hoffe jedoch, dass diese Beispiel-Tutorialcodes eine Basisvorlage für Entwickler bieten, die bei ihrem nächsten Projekt Zeit sparen möchten.