Hier könnte deine Werbung stehen! So wie das hier:

Kategorien: LeseaboTutorials

Joomla! eigene Modalboxen nutzen

Teilen

Hast du gewusst, dass Joomla! von Haus aus ein Modal-/Lightboxfenster für Popups mitbringt? Jedoch die wenigsten Leute benutzen diese Funktion und installieren lieber zusätzliche Plugins, die dann laufend aktualisiert und gepflegt werden müssen.

Bei einer Migration- oder Pluginwechsel muss du dann mühsam die ganzen Klassen von Hand anpassen. Verwendest du die Joomla!-eigenen Klassen, sind sie immer aktuell und ersparen dir das zusätzliche Installieren von Plugins.

[groups_non_member group=”Leser”]

Dieser Inhalt ist nur für die Abo Leser. Bitte anmelden oder ein Lese Abo lösen.

[groups_login] [/groups_non_member]

[groups_member group=”Leser”]Damit im Joomla! Backend die hauseigenen Popup-Boxen in schicken Modal-Style öffnen, hat man eine eigene Lightbox Popup-Klasse mit dem entsprechenden Javascript-Code mit eingebaut. Diese funktioniert nicht nur für die Backend-Anwendungen sondern kann auch problemlos im Frontend genutzt werden.

Beispiel 1: Text oder Bild in neuem Modalfenster

Die Joomla! Core-Komponenten (com_content, com_contact) bringen das Einbinden der Modalklasse von Haus aus mit. Solltest du ein Template verwenden, dass diesen Aufruf verhindert oder die Klasse nicht lädt, kannst du auch innerhalb des <body>-Tag diese zusätzliche PHP-Anweisung mit einbauen.

Natürlich muss dein Template die Darstellung (Abdunkeln-Effekt, Schatten und Rahmen) über das CSS vernünftig “stylen” können. Aber das sollte eigentlich bei jedem guten Template der Fall sein.

Fehlt die Klasse in deinem Template, musst du sicherstellen, dass das erforderliche Javascript mit unten stehender PHP-Anweisung geladen wird:

< ?php JHTML::_('behavior.modal'); ? >

Am Besten bringst du den Code in der index.php deines Templates unter.

In den Joomla! eigenen Artikeln musst du in der Linkanweisung nur die Klasse “modal” ergänzen und schon sollte deine verlinkte Quelle in einer neuen Modal-Box öffnen. Das sieht dann etwa so wie in diesem Beispiel unten aus:

<a href="deine_quell-url" class="modal">Dein Text oder Bild</a>

Beispiel 2: Externe Webistes im Modalfenster öffnen

Natürlich kannst du neben Text- und Bildlinks auch externe Websites auf die gleiche Weise öffnen lassen. Anstatt deine Besucher mit target=”_blank” von deiner Seite wegzulotsen, kannst du die externe Seite in einer smarten Lightbox auf deiner Seite öffnen lassen.

Auf diese Weise kannst du die Quelle zwar extern verlinken, aber die Besucher bleiben tendenziell länger auf deiner Seite.

<a href="Link zu externen Quelle" class="modal">Hier der Textlink</a>

Selbstverständlich gibt es noch viele weitere Anwendungsbeispiele, für die man die Modal-Klasse verwenden könnte. Auch die Entwickler von eigenen Komponenten könnten, anstatt zusätzliche eigene Klassen einzubauen, auf die Core-eigenen Modal-Funktion zurückgreifen.

Quelle: docs.joomla.org[/groups_member]

Roger Perren @joomlainfo1

Letzte Beiträge

Umbau abgeschlossen

Nach einem Jahr im WordPress Pilot-Betrieb wurden jetzt an der Website umfassende Optimierungsarbeiten durchgeführt. Jetzt sind die Arbeiten mehrheitlich abgeschlossen. Weiterlesen

vor 3 Tagen

Akeeba Alternativen

Mit dem 7.x Release kürzt Akeeba seine Funktionen in der kostenlosen Coreversion. Hier ein paar Alternativen, wenn man nicht auf… Weiterlesen

vor 6 Tagen

Joomla! 3.9.13 Update erschienen!

Das Joomla! 3.9.13 Update behebt zwei kleinere Sicherheits-Lücken sowie 26 gemeldete Probleme, die in diesem Release behoben wurden. Weiterlesen

vor 1 Monat

Neues Spring Template fürs Backend von Joomla! 4

Erfrischend neues Joomla! 4 Admin-Template namens «Spring» vorgestellt. Ich habe das neue Template angeschaut und meine ersten Eindrücke als Vor-… Weiterlesen

vor 1 Monat

Joomla! 4 und neue Freunde kennenlernen

Kann man kostenlos Joomla! 4.0 besser kennenlernen und gleichzeitig noch neue Joomla!Spezialisten kennenlernen? Weiterlesen

vor 2 Monaten

Strukturierte Daten in Joomla! einbauen

Wie bekomme ich meine FAQ Inhalte schön strukturiert in die Google Suchmaschine? Franz Hollweck zeigt dir in diesem Artikel, wie… Weiterlesen

vor 2 Monaten