Formular in modalem Fenster anzeigen
Obwohl dieser Beitrag Teil der Visforms Dokumentation ist, beschreibt er doch einige allgemeine Strategien zum Anzeigen jeglichen Inhalts einer Joomla! Webseite in einem modalen Fenster.
Mit Visforms ist es prinzipiell möglich, Formulare in einem modalen Fenster anzuzeigen.
Ob modale Formulare auf Ihrer Webseite in der Praxis funktionieren hängt aber nicht allein von Visform ab, sondern auch von Ihrem Template.
Modale Fenster zur Anzeige von Content in Joomla! - Grundsätzliches
Die erfolgreiche Verwendung von modalen Fenstern benötigt entsprechende Implementierungen in Ihrem Template. An erster Stelle muss das Template CSS die class .modal implementieren, so dass die Verwendung des class Attributs "modal" bei einem HTML-Element tatsächlich in einer "modalen" Darstellung des HTML-Elements erfolgt.
Die Option "Seitenklasse"
Eine Möglichkeit ein Formular (oder anderen Joomla! Content) in einem modalen Fenster anzuzeigen ist es, dem Menü Eintrag, der auf das Formular verlinkt, in der Option "Seitenklasse" (im Reiter "Seitenanzeige") den Wert " modal" (mit führendem Leerzeichen) zu geben. Als ein Ergebnis wird das Formular in einem modalen Fenster angezeigt, das über dem Rest der Webseite liegt. Auch der Ergebnistext nach erfolgreichem Abschicken wird wie erwartet modal angezeigt. Ein Problem bei dieser Vorgehensweise ist, dass es für den Benutzer keine Möglichkeit gibt, das modale Fenster zu schließen. Die einzige Möglichkeit ist, auf einen Menülink in der Seite, die unter dem modalen Fenster glücklicherweise noch zu sehen ist, zu klicken. Insgesamt ist dies keine sehr befriedigende Lösung.
Das "component" Template
Joomla! unterstützt die Verwendung des URL Parameters "tmpl". Dieser Parameter erwartet den Namen einer (php) Datei (ohne Dateinamenserweiterung) als Wert. Diese Datei, (ich nenne sie hier tmpl-Datei) muss im Root Ihres Template Verzeichnisses liegen. Meist wird die Datei component.php benannt, aber prinzipiell können Sie jeden beliebigen Dateinamen verwenden, was Ihnen die Möglichkeit gibt unterschiedliche tmpl-Dateien für unterschiedliche Zwecke zu erstellen.
Die Verwendung einer tmpl-Datei ist ein wesentlich flexiblerer Weg um ein modales Fenster zu erzeugen, als der oben beschriebene Weg über die Seitenklasse "modal", weil Sie hier individuellen Code in der tmpl-Datei schreiben können, der es Ihnen z.B. erlaubt einen "Close"-Button einzufügen, der auf eine spezifizierte Seite weiterleitet.
Ein modales Formular mit einem "component" Template erzeugen
Die Datei component.php
Als erstes benötigen Sie die tmpl-Datei im Root-Verzeichnis Ihres Templates. Sie können überprüfen, ob bereits eine solche Datei existiert und diese gegebenenfalls anpassen oder eine eigene neue Datei anlegen. In meinen Beispiel habe ich die Datei component.php genannt, aber wie gesagt, Sie können die Datei auch anders benennen.
Wenn Sie ein modales Fenster mit einem "Close"-Button erzeugen wollen, sollte, die Datei mindestens folgenden Code enthalten.
<?php
defined('_JEXEC') or die;
$app = JFactory::getApplication();
$doc = JFactory::getDocument();
$this->language = $doc->language;
$this->direction = $doc->direction;
// Add JavaScript Frameworks
JHtml::_('bootstrap.framework');
// Add Stylesheets
$doc->addStyleSheet('templates/' . $this->template . '/css/template.css');
// Load optional rtl Bootstrap css and Bootstrap bugfixes
JHtmlBootstrap::loadCss($includeMaincss = false, $this->direction);
?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="language; ?>" lang="language; ?>" dir="direction; ?>">
<head>
<jdoc:include type="head" />
</head>
<body class="contentpane modal">
<p><a href="/index.php">Close ×</a></p>
<jdoc:include type="message" />
<jdoc:include type="component" />
</body>
</html>
Sie müssen gegebenenfalls den Namen der CSS Datei und den Pfad zur css Datei anpassen (oder wenn Ihr Template mehr als eine CSS-Datei verwenden auch zusätzliche $doc->addStyleSheet() Anweisungen hinzufügen).
Der Menü Eintrag
Anstelle eines Menü Eintrags vom Typ Visforms verwenden Sie nun einen Menü Eintrag vom Typ "Externer Link" um das Formular mit Hilfe der tmpl-Datei anzuzeigen. Geben Sie in der Option "Link" des Menü Eintrags folgende URL an. Gegebenenfalls müssen Sie die url/zu/ihrer/webseite und den Wert des id-Parameters (geben Sie hier die Id des Formulars, das Sie anzeigen wollen und die nicht unbedingt wie im Beispiel 1 ist ein) anpassen.
https://url/zu/ihrer/webseite?option=com_visforms&view=visforms&id=1&tmpl=component
Grundsätzlich sind dies alle Schritte, die nötig sind, um ein Formular in einem modalen Fenster, das bei Bedarf geschlossen werden kann, anzuzeigen. Es ist aber sehr wahrscheinlich, dass Sie zusätzlich Anpassungen am CSS des Templates vornehmen müssen, damit das modale Fenster mit dem Formular auch hübsch designed ist.