Forgot your password?

Forgot your username?

All about IT, Web and Development.
By users for users.

JQuery Modal Fenster mit Facebox



Modal Fenster sieht man mittlerweile auf vielen Webseiten. Dabei handelt es sich um kleine Pop-Up ähnliche Fenster, welche sich wie eine zweite Ebene über die Webseite legen.

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.


Facebox schließen


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

Michael Kostka

Fachinformatiker / Systemintegration
Ich schreibe hier regelmäßig zu den Themen Android, Web, Linux und Hardware.

Raspberry Pi Starter Kit
DataCloud

Leave a comment

I have read the privacy policy and agree to electronically store and process my input data to answer the request.