Klick auf "Login" & "Passwort vergessen" soll pop-up öffnen anstatt in Hauptspalte

[sepp_a_u]

Hallo zusammen,

gibt es eine Möglichkeit, dass wenn man auf den Link "Anmelden" bzw. "Passwort vergessen" auf meiner Page ein kleines Pop-Up geöffnet wird, in welches man die Daten eingeben kann anstatt es sich in der Hauptspalte öffnet? Nach dem erfolgreichen Login soll dann das pop-up wieder verschwinden und der User kann normal weiter surfen.

hier mal die page:
www.esobp.de
user: test
pw: beerpong

viele grüsse und danke,
David

[lucina]

Siehe beispielsweise http://www.tl-usertreffen.weitzeldes...are-login.html

[sepp_a_u]

das ist genau das, was ich suchte. Jetzt nur die frage: wie kann ich die lightbox mit dem {{article_open}} öffnen? ich habe nämlich den header mit den link per modul eingebunden:

<div class="login_registration">
{{iflng::en}}{{article_open::63}}Login{{link_close}}{{iflng}}{{iflng::de}}{{article_open::60}}Anmelden{{link_close}}{{iflng}} | 
{{iflng::en}}{{article_open::62}}Register{{link_close}}{{iflng}}{{iflng::de}}{{article_open::59}}Registrieren{{link_close}}{{iflng}} |
{{iflng::en}}{{article_open::64}}Passwort vergessen{{link_close}}{{iflng}}{{iflng::de}}{{article_open::61}}Passwort vergessen{{link_close}}{{iflng}} | 
{{insert_module::8}}
</div>

Wenn man hier jetzt auf Login klickt, dann öffnet sich der Artikel in welchem das Login Modul hinterlegt ist. Jedoch geht dann kein pop-up auf, sondern nur die blanko-page.

Viele Grüsse u danke,
David

[lucina]

In meinem HTML steht sowas:

<p><span class="login"><a href="{{link_url::xx}}" rel="lightbox[loginform]">Login</a></span></p>

Wenn Du das noch in iflng packst sollte es doch passen.

[sepp_a_u]

Das habe ich jetzt versucht.

<div class="login_registration">
{{iflng::en}}<a href="{{link_url::65}}" rel="lightbox[400 200]">Login</a>{{iflng}}{{iflng::de}}<a href="{{link_url::62}}" rel="lightbox[400 200]">Anmelden</a>{{iflng}} | 
{{iflng::en}}{{article_open::62}}Register{{link_close}}{{iflng}}{{iflng::de}}{{article_open::59}}Registrieren{{link_close}}{{iflng}} |
{{iflng::en}}{{article_open::64}}Passwort vergessen{{link_close}}{{iflng}}{{iflng::de}}{{article_open::61}}Passwort vergessen{{link_close}}{{iflng}} | 
{{insert_module::8}}
</div>

Aber leider funktioniert es leider nicht:
www.esobp.de
user: test
pw: beerpong

Viele Grüsse u danke,
David

[lucina]

Ein lightbox / mediabox / was-auch-immer-JS ist vermutlich ganz hilfreich ... ;-)

[sepp_a_u]

wie und wo stelle ich das ein? bin gerade verwirrt, sorry.

[lucina]

Wenn eine Lightbox aufgehen soll, dann würde ich zumindest ein entsprechenden Script mitladen wollen. Also Mediabox oder ähnlich im Seitenlayout aktivieren.

[sepp_a_u]

Im Seitenlayout habe ich gesucht. Aber da gibt es irgendwie nur MooTools und jQuery. Alles andere finde ich irgendwie nicht. Muss ich dafür noch eine Erweiterung installieren?

[lucina]

Diese Checkboxen gibt es bei Dir nicht?
lightbox_ins_layout.jpg

[sepp_a_u]

Aha Unter MooTools. Habe es jetzt gefunden und aktiviert. Jedoch klappt es leider immer noch nicht. Habe die Mediabox sowohl im Blank-Seitenlayout als auch im Standard-Seitenlayout aktiviert.

[sepp_a_u]

kann mir hier noch jemand helfen?

[sepp_a_u]

Kann mir hier jemand helfen? Irgendwas muss ich wohl falsch machen Bekomme das mit dem Pop-up irgendwie nich hin..

[Samson1964]

Hängt das mit Zeile 17 im Quelltext zusammen?

<script src="assets/js/025b540298e1.js"></script>

Meldung nach Klick darauf:

<h1>Not Found</h1>
<p>The requested URL /de/assets/js/025b540298e1.js was not found on this server.</p>

[sepp_a_u]

ok danke shconmal für den hinweis. aber wie und wo finde ich die .js-datei? sollte die nicht in der ursprünglichen Contao-Root-Installation enthalten sein?

Viele und Danke,
David

[sepp_a_u]

Kann mir hier noch jmd weiterhelfen?

[sepp_a_u]

push

[sepp_a_u]

leider hab ich hier noch keine lösung gefunden. kann mir jmd weiterhelfen bei dem problem?

[lucina]

Done (you've got mail).

Kurzform: mediaboxAdvanced interferierte mit ein paar anderen JS-Schnipseln, bei Doctype HTML sollten die Aufrufe data-lightbox="foobar" und nicht rel="lightbox" lauten.

[sepp_a_u]

danke auch hier nochmals.
jetzt würde ich aber gerne noch folgende punkte ändern:

1. Höhe und Breite der Lightbox auf 640px auf 320px
Habe hier für den Code wie folgt geändert:

{{iflng::en}}<a href="{{link_url::65}}" data-lightbox="loginform width:640px;height:320px">Login</a>{{iflng}}{{iflng::de}}<a href="{{link_url::62}}" data-lightbox="loginform width:640px;height:320px">Anmelden</a>{{iflng}}

Es funktioniert auch für ca. 1 Sekunde. Jedoch dann wird die Form automatisch wieder sehr lang (ca. 1000px) und sehr schmal mit ca. 200px. Wo liegt da der Fehler?

2. Passwort vergessen soll ebenfalls im selben Pop-Up enthalten sein
Der Link zum Passwort vergessen Formular soll ebenfalls im selben Formular enthalten sein. Wie kann ich dies einarbeiten? Darauf aufbauend stellt sich die Frage, wie ich es hinbekomme, dass dann auch das Formular im selben Pop-up angezeigt wird? Ganz dem "Vorbild" [Link wegen nondisclosure agreement entfernt. Bitte poste keine Links die ich Dir per PM gebe. In der Regel habe ich dafür Gründe. Danke, Carolina.] . So eine Login-Box möchte ich gerne haben von der Funktionalität her.

Ich hoffe mir kann jemand helfen...

[sepp_a_u]

push

[Supermann]

Hallo,

versuch mal:

data-lightbox="640 320"

ganz schlicht und einfach...

[sepp_a_u]

Hallo,

versuch mal:

data-lightbox="640 320"

ganz schlicht und einfach...

Hallo Supermann,

danke für den Input. Habe ich versucht, aber funktioniert leider auch nicht
Gibt es noch weitere Lösungsvorschläge?

[Supermann]

Hallo,

um den Fehler einzugrenzen, würde ich erst einmal einen normalen Artikel ganz einfach per Lightbox Befehl aufzurufen, also:

<a href="{{link_url::65}}" data-lightbox="640 320">Login</a>

Wenn das dann in der Lightbox aufgeht, dann kann man Schritt für Schritt den Fehler suchen. Geht auch das nicht in der Lightbox auf, sind entweder Mootools nicht aktiv oder ein anderes Script behindert die Lightbox.

Denn das mit dem Login in der Lightbox ist nicht so einfach, denn wenn Du das Formular in der Box absendest, mus das Fenster ja auch Ordnungsgemäß schließen, bzw. bei Falscheingabe darf es sich nicht schließen. Das kommt aber im nächsten Schritt, erst einmal ist wichtig ob die Lightbox überhaupt aufgeht.

Solte das dann funktionieren kommt der Passwort vergessen Link in das Login Template, aber später.

[Supermann]

Hallo,

so jetzt schon einmal die Anleitung für das Passwort vergessen im Login. Je nachdem welches Loginform Du benutzen willst, das Template z.B "mod_login_1cl.html5" unter Layout -> Templates mit der Option "Neues Template" öffnen, Namen kannst Du beibehalten. Jetzt auf das letzte Icon hinter dem template klicken, das Template kann nun bearbeitet werden.

Anbei jetzt mein Code:

Hier den Passwort Code in Dein template kopieren und den Link anpassen. Wenn man dann Passwort vergessen aufruft wird der Link wird dann auch in dem gleichen Fenster angezeigt.

<!-- indexer::stop -->
<div class="<?php echo $this->class; ?> one_column tableless login block"<?php echo $this->cssID; ?><?php if ($this->style): ?> style="<?php echo $this->style; ?>"<?php endif; ?>>
  <?php if ($this->headline): ?>
    <<?php echo $this->hl; ?>><?php echo $this->headline; ?></<?php echo $this->hl; ?>>
  <?php endif; ?>
  <form<?php if ($this->action): ?> action="<?php echo $this->action; ?>"<?php endif; ?> id="tl_login" method="post">
    <div class="formbody">
      <?php if ($this->message): ?>
        <p class="error"><?php echo $this->message; ?></p>
      <?php endif; ?>
      <input type="hidden" name="FORM_SUBMIT" value="tl_login">
      <input type="hidden" name="REQUEST_TOKEN" value="{{request_token}}">
      <label for="username"><?php echo $this->username; ?> / E-Mail</label>
      <input type="text" name="username" id="username" class="text" value="<?php echo $this->value; ?>"><br>
      <label for="password"><?php echo $this->password; ?></label>
      <input type="password" name="password" id="password" class="text password" value="">
      <?php if ($this->autologin): ?>
        <div class="checkbox_container">
          <input type="checkbox" name="autologin" id="autologin" value="1" class="checkbox"> <label for="autologin"><?php echo $this->autoLabel; ?></label><br>
        </div>
      <?php endif; ?>
                <a href="{{link_url::20}}" title="Passwort vergessen" class="next">Passwort vergessen</a>
      <div class="submit_container">
        <input type="submit" class="submit" value="<?php echo $this->slabel; ?>">
      </div>
    </div>
  </form>
</div>
<!-- indexer::continue -->

[sepp_a_u]

Hallo,

um den Fehler einzugrenzen, würde ich erst einmal einen normalen Artikel ganz einfach per Lightbox Befehl aufzurufen, also:

<a href="{{link_url::65}}" data-lightbox="640 320">Login</a>

Wenn das dann in der Lightbox aufgeht, dann kann man Schritt für Schritt den Fehler suchen. Geht auch das nicht in der Lightbox auf, sind entweder Mootools nicht aktiv oder ein anderes Script behindert die Lightbox.

Denn das mit dem Login in der Lightbox ist nicht so einfach, denn wenn Du das Formular in der Box absendest, mus das Fenster ja auch Ordnungsgemäß schließen, bzw. bei Falscheingabe darf es sich nicht schließen. Das kommt aber im nächsten Schritt, erst einmal ist wichtig ob die Lightbox überhaupt aufgeht.

Solte das dann funktionieren kommt der Passwort vergessen Link in das Login Template, aber später.

Leider hat das auch nicht funktioniert. Ich habe das gemacht wie du geschrieben hast und auf der Startseite unten mal den Befehl eingegeben, aber es klappt leider nicht.
Hat noch jemand ein paar Tipps? Würde das gerne realisieren bzw. muss...Bin über jeden Tipp dankbar.

Viele Grüsse u danke,
David

[Supermann]

Hallo,

das geht auch nicht!!!! ist ein weiter Begriff. Was geht nicht?

Hast Du schon einmal versucht ob die Lightbox überhaupt auf geht? Wenn das nähmlich nicht der Fall ist dann kannst Du basteln wie Du willst, kommst aber nie zu einem funktionirenden Ergebnis.

Um Dir zu helfen, muss das Schritt für Schritt geschehen. Also als erstes einmal einen Link mit einem Lightbox aufruf einbauen.

<a href="{{link_url::65}}" data-lightbox="640 320">Login</a>

für die "65" must Du eine ID von einer Deiner Seiten dort angeben.

Genau dieses sollte dann auch die Lightbox aufrufen, sollte das jetzt nicht funktionieren, muss Du solange den fehler suchen bis es geht. Wenn es dann partout nicht geht, solltest Du vieleicht nicht einfach schreiben "geht auch nicht" sondern vielleicht einmal den Link posten wo man sich das ansehen kann.

[sepp_a_u]

Hallo,

das geht auch nicht!!!! ist ein weiter Begriff. Was geht nicht?

Hast Du schon einmal versucht ob die Lightbox überhaupt auf geht? Wenn das nähmlich nicht der Fall ist dann kannst Du basteln wie Du willst, kommst aber nie zu einem funktionirenden Ergebnis.

Um Dir zu helfen, muss das Schritt für Schritt geschehen. Also als erstes einmal einen Link mit einem Lightbox aufruf einbauen.

<a href="{{link_url::65}}" data-lightbox="640 320">Login</a>

für die "65" must Du eine ID von einer Deiner Seiten dort angeben.

Genau dieses sollte dann auch die Lightbox aufrufen, sollte das jetzt nicht funktionieren, muss Du solange den fehler suchen bis es geht. Wenn es dann partout nicht geht, solltest Du vieleicht nicht einfach schreiben "geht auch nicht" sondern vielleicht einmal den Link posten wo man sich das ansehen kann.

Hallo Superman,

danke für deine Antwort. Natürlich habe ich schon versucht, ob die Lightbox aufgeht - sie geht auf Und auch der Link darin ist der korrekte für die Seite, die aufgehen soll. Anschauen kannst du das hier:

http://www.esobp.de/en/home.html (user: test, pw: beerpong)

Dort findest Du unten über dem bild über die ganze page den Link "Login". Und da sieht man, dass sich die lightbox einfach vergrössert und nicht das gewünschte und mitgegebene format annimmt. Dazu verzieht es im hintergrund das ganze CSS-Format.

Viele Grüsse,
David

[sepp_a_u]

Hat hier jemand weitere Tipps oder Hilfe wegen diesem Problem?

[Supermann]

Hallo,

so wie ich das sehe nutzt Du die Colorbox... da ist das normal das die sich so verhält. Genau wegen dem von Dir genannten Problem musst Du dort in das Script der Colorbox eingreifen.

Nimm einfach die "moo_mediabox" dann bekommst Du auch die richtige größe.

[sepp_a_u]

Hallo,

so wie ich das sehe nutzt Du die Colorbox... da ist das normal das die sich so verhält. Genau wegen dem von Dir genannten Problem musst Du dort in das Script der Colorbox eingreifen.

Nimm einfach die "moo_mediabox" dann bekommst Du auch die richtige größe.

Ich habe jedoch im seitenlayout die "Moo_mediabox" aktiviert. Daher versteh ich das gerade nicht ganz. Und der HTML-Code sieht wie folgt aus

{{iflng::en}}<a href="{{link_url::65}}" data-lightbox="640 320">Login</a>{{iflng}}{{iflng::de}}<a href="{{link_url::62}}" data-lightbox="640 320">Anmelden</a>{{iflng}} |

Viele Grüsse,
David

[sepp_a_u]

Push

[sepp_a_u]

hat noch jemand ideen woran das liegen kann?

[sepp_a_u]

hmmm...ich glaube langsam, dass es schier unmöglich scheint, dass ich das hinbekomme, oder? kann mir sonst niemand helfen hier?
anscheinend sei es doch so einfach, aber bisher klappt kein Tipp.
Gibt es noch ein weiteres tutorial?

[Supermann]

Hallo,

also ich kann Dir bestätigen das dass lt. den ganzen Tutorials funktionieren muss und auch tut. Wenn es bei Dir so nicht funktioniert, liegt das nicht an den Tutorials sondern an der Konfiguration Deines Systems.

[sepp_a_u]

Hallo,

also ich kann Dir bestätigen das dass lt. den ganzen Tutorials funktionieren muss und auch tut. Wenn es bei Dir so nicht funktioniert, liegt das nicht an den Tutorials sondern an der Konfiguration Deines Systems.

kannst du mir dann mal deine tutorials schicken? dann werde ich das nochmals erneut aufbauen.

[Supermann]

Hallo,

also es gibt hier im Forum ein Tutorial mit "Login im Popup"... genau nachdem habe ich auch meinen Login aufgebaut und es hat auf anhieb funktioniert. Wichtig ist halt das dass genauso gemacht wird wie im Tutorial, also Lightbox und nicht etwas anderes...

Die anderen Hilfen findest Du ja hier im Thread.

[sepp_a_u]

Ich habe es heute nochmals erneut versucht und mache es 1:1 nach der Anleitung. Leider klappt es nicht. Liegt es daran, dass ich Contao 3 verwende? Denn einige Einstellungen im Seitenlayout etc sind ja nicht mehr gleich. Ebenso ist das Tutorial nicht ganz ausführlich, leider.

http://www.tl-usertreffen.weitzeldes...are-login.html

Ich wäre so froh, wenn mir jemand helfen könnte. Das mit dem Pop-Up klappt ja, jedoch kann ich die Lightbox nicht formatieren. Suche verzweifelt weiterhin hilfe!!

Viele Grüsse und danke,
David

[Supermann]

Hallo,

ich bin ganz fest der Meinung das ich Dir hier schon einmal geschrieben hatte das Du nicht die Lightbox, sondern die Colorbox genutzt hast und diese kann man nicht so einfach per CSS gestallten. Du solltest schon die Lightbox benutzen, dann kannst Du diese auch gestallten und Sie wird auch über den Aufruf genau in der richtigen größe geöffnet.

Deshalb möchte ich mal sagen das Du nicht alles genau den vorgaben gemacht hast! Ich habe gerade noch einmal nachgesehen und Du nutzt immer noch die Colorbox....

PS. Zu der Anleitung die nicht mehr alzu aktuell ist, gibt es hier im Forum aber auch Lösungen, so das es letzlich auch funktioniert. An Contao 3 liegt es nicht, das nutze ich selber und es funktioniert alles einwandfrei.... wenn man sich an die Vorgaben hält.

[Supermann]

Ich habe jedoch im seitenlayout die "Moo_mediabox" aktiviert. Daher versteh ich das gerade nicht ganz. Und der HTML-Code sieht wie folgt aus

{{iflng::en}}<a href="{{link_url::65}}" data-lightbox="640 320">Login</a>{{iflng}}{{iflng::de}}<a href="{{link_url::62}}" data-lightbox="640 320">Anmelden</a>{{iflng}} |

Viele Grüsse,
David

Du nutzt immer noch die Colorbox in dem Template...

Der Link bzw. der Aufruf ist richtig und ruft beide Boxen auf, wobei aber nur die Lightbox sich auch an die größe hält.