Bekannt geworden sind diese vor allem von Facebook. Mit dem JQuery Plugin Facebox lassen sich die Modal Fenster sehr leicht einbinden.
Vorbereitung
JQuery herunterladen
Zunächst muss die JavaScript Bibliothek JQuery heruntergeladen werden und auf den Webserver kopiert werden.
Facebox herunterladen
Anschließend muss man das JQuery Plugin Facebox herunterladen.
Danach wird die Zip-Datei entpackt. In dem neu entstandenen Verzeichnis befindet sich nun ein Unterverzeichnis namens src. Dieses Verzeichnisses wird ebenfalls auf den Webserver kopiert. Damit es zu keinen Konflikten kommt, benennen wir das Verzeichnis in facebox um.
Skripte einbinden
Im nächsten Schritt wird JQuery und das Plugin Facebox in die Webseite eingebunden:
<!DOCTYPE html> <html> <head> <title>JQuery Modal Fenster mit Facebox</title> <link rel="stylesheet" type="text/css" href="facebox/facebox.css"></link> <script src="jquery.min.js" type="text/javascript"></script> <script src="facebox/facebox.js" type="text/javascript"></script> </head> </html>
Hier wird zunächst das Stylesheet für das Modal-Fenster eingebunden. Anschließend wird die JQuery Library geladen. Abschließend wird noch das Facebox-Plugin hinzugefügt.
Facebox aktivieren
Damit ein Link per Ajax in einer Facebox geöffnet wird, kann dieser mit dem rel="facebox" Attribut versehen werden.
Hierzu muss zunächst im <head> oder <body> Abschnitt des HTML Quellcodes folgender Code eingefügt werden:
<script type="text/javascript"> $(document).ready(function(){ $('a[rel*=facebox]').facebox(); }); </script>
Damit wird jeder mit dem Attribut rel="facebox" versehene Link in einem Modal-Fenster geöffnet. Ein Link sähe dann wie folgt aus:
<a href="https://www.foxplex.com/" rel="facebox">Modal Link</a>
Facebox manuell aufrufen
Natürlich existiert auch eine Möglichkeit ein Facebox Modal-Fenster per Code aufzurufen:
Modal-Fenster mit Text
$.facebox('Text des Modal-Fensters');
Damit wird der Inhalt in der Klammer in einem Modal-Fenster angezeigt.
Modal-Fenster mit Datei / Webseite
$.facebox({ajax: 'datei.php'});
Mit diesem Befehl wird eine Datei per Ajax in die Facebox geladen.
Modal-Fenster mit Bild
$.facebox({image: 'bild.png'});
Durch diese Zeile kann man ganze Bilder per Facebox anzeigen.
Schließen kann man eine Facebox über folgenden Befehl:
$.facebox.close();
Probleme
$.facebox.close() not found
Dieser Fehler bzw. ähnliche Fehler, die auf not found enden, können beispielsweise über die Fehlerkonsole von Firefox entdeckt werden.
Meistens tritt dieser auf, wenn in einer per Ajax geladenen Datei erneut die JQuery Library oder Facebox eingebunden wird. In diesem Fall sollte man die entsprechenden Codezeilen dann in der Datei entfernen.
Eine weitere Möglichkeit ist natürlich auch, dass das Facebox Plugin nicht eingebunden wurde.
Fazit
Facebox ist ein sehr flexibles Plugin für JQuery mit welchem man sehr schicke Modal-Fenster implementieren kann. Für weitere Informationen empfiehlt sich auch die offizielle Dokumentation von Facebox.
Quellen: Facebox Logo
Ähnliche Artikel
Suchen
Hinterlasse einen Kommentar