Formular an Lightbox weiterleiten

**Ignatz** · 03.12.2014, 07:39

Hallo,

ich habe ein Formular, welches die erfassten Daten an eine externe Seite sendet. Diese soll sich in einer Lightbox öffnen. Es gibt zwar schon mehr oder weniger ähnlich Threads dazu, aber ein richtige Lösung dazu habe ich nicht gefunden.
Kann mir jemand weiterhelfen?

Gruß,
Ignatz

**webstar** · 03.12.2014, 08:53

Ich mach das folgendermaßen:

Seite anlegen des Seitentyps "Externe Weiterleitung"
Als Link-Url InsertTag auf gewünschte Seite + Hashtag {{link_url::2}}#popup. Falls die Seite dynamisch sein soll geht auch {{env::referer}}#popup
Weiterleitung des Formulars auf die angelegte Seite einstellen
Auf der Seite ID 2 gibt es ein Javascript, dass auf #popup reagiert und die Lightbox öffnet
Optional: Das Script kann im Browser die Url zurücksetzen (#popup) entfernen

Und als extra noch ein Beispiel-Script für JQuery:

Code:

$(document).ready(function() {
    if(window.location.hash == '#popup') {
        window.location.hash = '';

        if ("pushState" in history) {
            history.pushState("", document.title, location.pathname + location.search);
        }

        // open your lightbox here
    }
}

**Ignatz** · 03.12.2014, 09:00

Danke webstar,

leider kann ich dir nicht ganz folgen. Wenn ich das richtig verstehe, dann öffnet sich ja bereits das Formular in der Lightbox, oder?! Ich möchte aber, dass sich nach Absenden des Formulars die Ergebnisseite in der Lightbox öffnet. Oder habe ich dich da missverstanden?

Gruß,
Ignatz

**webstar** · 03.12.2014, 09:10

Zitat von Ignatz

Danke webstar,

leider kann ich dir nicht ganz folgen. Wenn ich das richtig verstehe, dann öffnet sich ja bereits das Formular in der Lightbox, oder?! Ich möchte aber, dass sich nach Absenden des Formulars die Ergebnisseite in der Lightbox öffnet. Oder habe ich dich da missverstanden?

Gruß,
Ignatz

Nein, das Formular kommt ganz normal auf eine Seite. Erst die Weiterleitungsseite des Formulars (normalerweise die Dankesseite) öffnet dann die Lightbox durch den oben beschriebenen Weg.

**Acta** · 16.02.2015, 14:39

@Webstar!

Wenn ich{{env::referer}}#popup in das Feld für Weiterleitungsziel einsetze, erhalte ich immer einen Fehler, da Contao irgendwie das "http://linkzurseite/tl/%7B%7Benv::host%7D%7D#popup" daraus bastelt. Ich muss aber gestehen, dass ich eine Ältere Version von contao einsetze... ist dir da ein Update bekannt, wo das Problem behoben wurde?

**webstar** · 16.02.2015, 15:17

Zitat von Acta

@Webstar!

Wenn ich{{env::referer}}#popup in das Feld für Weiterleitungsziel einsetze, erhalte ich immer einen Fehler, da Contao irgendwie das "http://linkzurseite/tl/%7B%7Benv::host%7D%7D#popup" daraus bastelt. Ich muss aber gestehen, dass ich eine Ältere Version von contao einsetze... ist dir da ein Update bekannt, wo das Problem behoben wurde?

Kann gut sein, dass Contao in älteren Versionen die Insert-Tags nicht auswertet im Seitenname. Du kannst natürlich auch einen feste Url angeben einer Zielseite.

**Acta** · 17.02.2015, 09:22

Danke... Hast du noch einen Tipp für folgendes Problem:

Code:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function() {
  var u = new URI(document.URL);
  if (u == 'http://meinlink/tl/index.php/merkzettel.html#popup') {
      Mediabox.open('#mb_popup', 'Favoriten', '180 40');
  }
});
//--><!]]>
</script>

Wenn ich das hier verwende, funktioniert alles wie gewollt.

Mein Problem ist aber, dass es auch über http://meinezweiteDomain/tl/index.ph...tel.html#popup funktionieren soll.

Wenn ich nur "/merkzettel#popup" eintrage, führt das dazu, dass gar keine Mediabox geladen wird.

**Supermann** · 17.02.2015, 12:18

Hallo,

ich bin auch gerade an so einer Sache am basteln, allerdings scheint mir das hier besser zu sein. ich habe den oben beschriebenen Weg auch ausgeführt, allerdings bekomme ich keine Lightbox geöffnet. Jedenfalls nicht mit meinem Jquery Code.

Wenn es euch nichts ausmacht könntet Ihr vielleicht euren Weg noch einmal genau darstellen.

**Acta** · 17.02.2015, 13:14

Also mal in kürze mein Weg:

1. 2 Seiten angelegt:

Seite 1 ist das Tatsächliche Ziel des Formulars
Seite 2 ist vom Typ Weiterleitung und ergänzt mir #popup
Als Adresse steht dort index.php/namedeinererstenseite.html#popup

2. Im Formular als Weiterleitungsziel Seite Nr. 2 ausgewählt

3. Im Layout folgenden Code ergänzt:

Code:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function() {
  var u = new URI(document.URL);
  if (u == 'http://euredomain/tl/index.php/namedeinererstenseite.html#popup') {
      Mediabox.open('#mb_popup', 'Favoriten', '180 40');
  }
});
//--><!]]>
</script>

4. Auf deiner Ersten Seite ein Inhaltselement hinterlegen mit der CSS-ID: #mb_popup. Dort den von dir gewünschten INhalt hinterlegen.
5. Im CSS für #mb_popup ein Display none setzen

Das wars denke ich!

**Supermann** · 17.02.2015, 13:17

Hallo,

danke Dir werde ich so ausprobieren und mich melden...

**webstar** · 17.02.2015, 13:48

Zitat von Acta

Danke... Hast du noch einen Tipp für folgendes Problem:

Mein Problem ist aber, dass es auch über http://meinezweiteDomain/tl/index.ph...tel.html#popup funktionieren soll.

Wenn ich nur "/merkzettel#popup" eintrage, führt das dazu, dass gar keine Mediabox geladen wird.

Warum überprüfst du nicht einfach nur den Hash, wie oben vorgeschlagen:

HTML-Code:

if(window.location.hash == '#popup') {

**Supermann** · 17.02.2015, 13:52

Hallo,

das hatte ich auch schon überlegt... und probiert. Aber ich bekomme das mit Deinem Code nicht hin... jedenfalls bekomme ich den restlichen Code zum öffnen der Lightbox nicht dort rein. Hast Du vielleicht einmal den kompletten Code, incl. dem Lightbox aufruf?

**Acta** · 17.02.2015, 13:54

Zitat von webstar

Warum überprüfst du nicht einfach nur den Hash, wie oben vorgeschlagen:

HTML-Code:

if(window.location.hash == '#popup') {

Weil ich zu Blöd war :-)

SUPER!

Sieht nun so aus!

Code:

<script type="text/javascript">
<!--//--><![CDATA[//><!--
window.addEvent('domready', function() {
  var u = new URI(document.URL);
  if (window.location.hash == '#popup')  {
      Mediabox.open('#mb_popup', 'Favoriten', '180 40');
  }
});
//--><!]]>
</script>

**webstar** · 17.02.2015, 13:56

Zitat von Supermann

Hallo,

das hatte ich auch schon überlegt... und probiert. Aber ich bekomme das mit Deinem Code nicht hin... jedenfalls bekomme ich den restlichen Code zum öffnen der Lightbox nicht dort rein. Hast Du vielleicht einmal den kompletten Code, incl. dem Lightbox aufruf?

Kann ich dir schon geben, aber wird dir nur weiterhelfen, wenn du dieselbe Lightbox Variante verwendest. Dies ist z.B. auf Bootstraps Modal ausgelegt. Wie du sieht, nur eine Zeile mehr als was ich eh schon gepostet habe.

Code:

$(document).ready(function() {
    if(window.location.hash == '#thankYou') {
        window.location.hash = '';

        if ("pushState" in history) {
            history.pushState("", document.title, location.pathname + location.search);
        }

        $('#thankYou').modal('show');
    }
});

**Supermann** · 17.02.2015, 15:13

Hallo,

jetzt klappt es auch bei mir mit eurem Script, jedenfalls geht das Popup richtig auf. Ich habe nur das Problem, das wenn ich das Popup schließe eine leere Seite habe.

HTML-Code:

https://www.digiphotopro.de/market/detail/image/united-states-nyc-manhattan#popup

Folgende Idee steckt dahinter: Ich möchte das sich die Detailansicht so wie ich das jetzt schon mit eurem Script wie in dem Link ersichtlich öffnet, schließt man dieses Popup, soll man wieder auf der Übersichtsichstseite von der Link geöffnet wurde sein.

Ich habe dafür auf der Detailseite den gesammten Content in einen DIV mir der ID popup gelegt und den Code zum öffnen des Popups in das Template eingesetzt. Jetzt könnte ich alls Links die von den Übersichtsseiten kommen durch den hash #popup erweitern, so wird jedes Bild welches aufgerufen wird in dem Popup angezeigt. Das Problem was ich jetzt allerdings noch habe ist die leere Deteilseite wenn ich das Popup schließe.

Gibt es evtl. eine Möglichkeit genau dieses Popup auch von der Übersichtsseite aufzurufen? oder hat evtl. jemand eine andere Lösung für mein Problem. Vorher hatte ich das ganz normal mit der Lightbox gelöst, allerdings war das dann nicht so optimal wenn die Aufrufe der Seite von außerhalb kamen, dann wurde die Detailseite ja ohne Lightbox angezeigt, so mit eurem Script wird ja die Lightbox erzwungen und genauso wollte ich das eigentlich auch haben.

EDIT: Habe gerade rausgefunden das beim Schließen der Lightbox man ganz normal auf der Detailseite landet. Das möchte ich aber nicht, sondern beim schließen der Box möchte ich gerne wieder dahin wo ich hergekommen bin. Gibt es evtl. eine Möglichkeit, das ich beim schließen der Lightbox einfache eine Seite zurück geleitet werde?

PS. Vieleich kennt jemand ja sogar eine einfachere Variannte wie ich die Detailseite dazu zwingen kann, bei jedem Aufruf als Lightbox zu öffnen.

**pix** · 05.03.2015, 08:53

Funktioniert soweit. Aber die weiße Seite nachdem man die Box schließt geht gar nicht. Hat jemand eine Idee?

**kai.olischar** · 09.02.2016, 14:56

Der Treat ist schon fast ein Jahr alt.
Ich habe diesbezüglich trotzdem eine Frage:
Bei mir ist dies genau umgekehrt: Das Formular befindet sich in einer Lightbox. Nun möchte ich, das die «Danke-Seite» im normalen Frame aufgerufen wird.
Zur Zeit öffnet sich die «Dankeseite» in der Lightbox.

Hat jemand da:

1) eine «quick & dirty» Lösung und
2) eine saubere Lösung parat?

Vielen Dank schoneinmal im Voraus.

Gruss