Automatisches Popup (zb. "neue Adresse") einbinden

Hier beschreibe ich, wie man ein Hinweis-Popup ohne Erweiterung in Contao anlegt.
Beispiel: http://demo.clickpress.de/index.php/

1. Neues Modul erstellen - Modultyp "Eigener HTML-Code"

HTML-Code:

---

<div id="mb_popup" class="invisible">
Hier kommt Euer Text/HTML-Code hin
</div>

---

Die id "mb_popup" muss sein, sonst funktioniert es nicht.

2. Das Modul in das Seitenlayout einbinden, ggf. ein neues erstellen.
In das Feld body-onload kommt dann folgendes rein:

HTML-Code:

---

Mediabox.open('#mb_popup', '', '300 262');return false;

---

300 262 steht hierbei für die Popup-Größe in Pixeln.

Viel Spaß damit! :)

Danke für die Anleitung.
Kann man immer mal gebrauchen.

Wer das Hinweis-Overlay nur einmalig anzeigen möchte, könnte dafür ein Cookie setzen. Mehr dazu hier: https://www.contao-community.de/show...i-Seitenaufruf

Wie kann man denn hier noch eine Cookie-Abfrage (inkl. setzen des selben) einbauen. Aus der Verlinkung des Vorbeitrages kann ich das nicht so einfach ableiten.

Da braucht es doch sicher ein bisschen PHP (mittels externen PHP-Script)?

So wie in diesem Thread den ich gerade wieder neu erweckt habe?
https://www.contao-community.de/show...l=1#post177449

Zitat:

---

Zitat von RainerG

Wie kann man denn hier noch eine Cookie-Abfrage (inkl. setzen des selben) einbauen.
...
Da braucht es doch sicher ein bisschen PHP (mittels externen PHP-Script)?

---

Das geht auch mit Javascript. Dann kommt der Code aber nicht in das body-onload-Feld sondern in das
Feld "Eigener Javascript-Code":

HTML-Code:

---

<script>
window.addEvent('load',function(){
if(Cookie.read('POPUP')) return;
Cookie.write('POPUP', '1',{duration: 365});
Mediabox.open('#mb_popup', '', '380 200');
});
</script>

---

Edit: Solltest Du noch XHTML-Template benutzen das <script> natürlich mit <script type="text/javascript"> austauschen.

Coooooooooool!

Klappt so wie ich es mir gewünscht habe!

Großes THX!

Gibts so ne simple Lösung auch auf Basis von jquery?

Zitat:

---

Zitat von jack_typewriter

Gibts so ne simple Lösung auch auf Basis von jquery?

---

Besser spät als nie. Aber ich brauchte es gerade auch für jQuery :D

Hier also die Lösung:

1. Neuen Artikel anlegen
2. Mit Inhalten für das PopUp füllen
3. Artikel-ID merken (seht ihr, wenn ihr mit den Cursor über den Bearbeitung-Stift eures Popupartikels hält)
4. Neues Modul vom Typ "Eigenes HTML" erstellen und mit dem Code (s. unten) befüllen und im insert_article Inserttag die ID mit eurer Artikel-ID ergänzen.
5. Modul im Seitenlayout oder als Inhaltselement einbinden

Code für das Modul (aktualisiert am 25.02.2016)

Code:

---

<script>
(function($){
        $(document).ready(function(){
                $.colorbox({
                        inline:true,
                        href:"#mb_popup",
                        loop: false,
                        maxWidth: '95%',
                        maxHeight: '95%',
                        opacity: 0.3
                });
        });
})(jQuery);
</script>

<style>
    #mb_wrapper #mb_popup {
        display: none;
    }
</style>
<div id="mb_wrapper">
    <div id="mb_popup">{{insert_article::310}}</div> <!-- 310 mit der ID eures Artikels ersetzen! -->
</div>

---

WICHTIG: In den Einstellungen müsst Ihr <script> bei "Erlaubte HTML-Tags" zulassen. Möchtet Ihr das nicht, könnt Ihr auch statt einem Modul den Code im Seitenlayout unter "Eigener JavaScript-Code" direkt einbinden.
Dann seid ihr aber nicht mehr so flexibel.

Die Cookie -Lösung beschreibe ich eventuell auch noch. Dafür hab ich aber aktuell keine Zeit :D

Jetzt kam vom Kunden die Frage, ob es auch mehrsprachig geht.
Dank Insert-tags kein Problem:

HTML-Code:

---

<script>
(function($){
        $(document).ready(function(){
                $.colorbox({
                        html:'<div id="mb_popup">{{ifnlng::de}}{{insert_article::396}}{{ifnlng}}{{iflng::de}}{{insert_article::310}}{{iflng}}</div>', // <- erste ID für EN und zweite für DE
                        loop: false,
                        maxWidth: '95%',
                        maxHeight: '95%',
                        opacity: 0.3
                });
        });
})(jQuery);
       
</script>

---

Hallo.

Sorry das ich den Thread nochmal vorkrame.
Ich benutze den Schippsel, der grundsätzlich auch funktioniert.

Ich beschreibs mal aus meiner Nichtprogrammierer-Sicht: Leider funktioniert es nicht (PopUp öffnet nicht), wenn ich normale Textelemente per inserttag einfügen lasse. Was ich rausbekommen habe, anhand der JS Konsole (Fehler: unterminated string literal)...
Sofern Zeilenumbrüche bestehen (und das ist bei Inhalten via Textlelement -TinyMCE- quasi immer so), funktioniert es nicht, da in JS-Strings wohl keine Zeilenümbrüche sein dürfen. Pack ich alles via HTML Inhaltselement in eine Zeile, wird das PopUp problemlos angezeigt.

Habe ich eine einfache Möglichkeit trotzdem Textelemente zu nutzen (Redakteur freundlich)?

Danke und Gruß
Thomas

Hallo...

...ich bin mal so frei und versuche es mit einer letzten vorsichtigen Push-Nachfrage. Hat jemand, der sich mit JS/jQuery auskennt, eine Idee, wie man dem begegnen könnte oder eine alternative für ein automatisches PopUp-Script, das man bestenfalls via inserttags mit einem Textelement befüllen kann?
Es gibt ja noch die Erweiterung srlayer, die aber auf Mootools basiert, was ich aus speziellen Gründen nicht nutzen kann/will.

Dankeschön.

Gruß
Thomas

Du hast Recht, mit den Insert-Tags funktioniert das nicht. Hier müsste man vorher per PHP alles an Zeilenumbrüchen rausschmeissen. Du kannst auch die Insert-Tags in Backticks fassen, allerdings werden dir einige Browser einen Strich durch die Rechnung machen.

Einzige Möglichkeit ohne PHP, bzw. Contao-Modul wäre einfach in den Einstellungen -> Markup komprimieren zu aktivieren.

Ansonsten hättest du noch die Möglichkeit, den Popup-Artikel in deine Seite einzubinden, per CSS ausblenden und dann in der Colorbox mit der inline-Option einzubinden. http://www.jacklmoore.com/colorbox/

Aber ich sehe schon, ich sollte doch mal ein Modul dafür bauen :D

ich bin gerade mal dabei den vorschlag von @stefan.sl zu testen, aber wo finde ich das Feld body-onload

Zitat:

---

In das Feld body-onload kommt dann folgendes rein:
HTML-Code:
Mediabox.open('#mb_popup', '', '300 262');return false;

---

@VGT Themes -> Seitenlayout -> Experteneinstellungen

@stefan-at-work ; danke, Experten-Einstellungen waren nicht aufgeklappt - war mein Fehler :confused:

habe das gerade mit der Colorbox in Contao 3 getestet - muss man da noch was beachten?

HTML-Code:

---

colorbox.open('#mb_popup', '', '300 262');return false;

---

Zitat:

---

Zitat von maipe

habe das gerade mit der Colorbox in Contao 3 getestet - muss man da noch was beachten?

HTML-Code:

---

colorbox.open('#mb_popup', '', '300 262');return false;

---

---

Ja, colorbox ist für jQuery. Dein Code ist aber für mooTools. Nimm also die jQuery Variante oben. :)
https://community.contao.org/de/show...l=1#post362609

Sorry hatte ich übersehen, danke für den Hinweis.

funktiort allerdings nur bedingt - nimmt man irgendeine ID, die es nicht gibt, öffnet sich die Colorbox. "Der Eintrag XY (nicht besetzte Artikel oder Content ID) existiert leider nicht".
Nimmt man eine aktive ID, egal von welchem Artikel oder Element (Video, Bild oder Text) öffnet sich nichts.

Im Layout unter eigenes Javascript ergänzt und script tag in den Einstellungen erlaubt:

HTML-Code:

---

<script>
(function($){
        $(document).ready(function(){
                $.colorbox({
                        html:'<div id="mb_popup">{{insert_article::xy}}</div>',
                        loop: false,
                        maxWidth: '95%',
                        maxHeight: '95%',
                        opacity: 0.3
                });
        });
})(jQuery);
       
</script>

---

Fehler im Quelltext:

HTML-Code:

---

<div id="cboxOverlay" style="display: none;"></div>

---

Also ich habe das gerade noch einmal geprüft. <div id="cboxOverlay" style="display: none;"></div> sobald ein reell existierendes Element für den Popup ausgewählt wird.


EDIT: Bloßer Text zwischen den tags wird angezeigt . Inserttags nicht.

Das Problem sind die Zeilenumbrüche im Quelltext. Aktivier mal in den Contao-Einstellungen "Markup komprimieren".

Zitat:

---

Zitat von stefan.sl

Das Problem sind die Zeilenumbrüche im Quelltext. Aktivier mal in den Contao-Einstellungen "Markup komprimieren".

---

Das wars - irgendwo in weiter Vergangenheit schon mal gehabt den Fall - DANKE für die Erinnerung. Mit einem {{inser_article::ID}} funktioniert auch eigenes Video in der Colorbox (Inhaltselement Video/Audio) funktioniert. Allerdings noch ohne Autoplay, hier starten alle Filme MP4, WEBM und FLV, gleichzeitig.
Und die Höhe des Colorbox Popup ´s wird im responsiven Design noch nicht richtig berechnet bzw. angezeigt mal schauen was die Colorbox Optionen bringen. Habe es erstmal mit

HTML-Code:

---

#cboxContent, #cboxWrapper, #cboxLoadedContent {
  height: 100% !important;
}

---

hinbekommen, ist natürlich nicht einwandfrei.

Ich habe gerade mal den Modul-Code oben aktualisiert. Jetzt gibt's auch keine Probleme mehr mit den Linebreaks.
https://community.contao.org/de/show...l=1#post362609

Danke für das jQuery. Funktioniert mit normalem Text bestens.

Möchte jetzt jedoch ein Bild anzeigen lassen. Habe es ganz normal als Artikel mit Inhaltselement Bild eingefügt.
Leider ist die Lightbox viel zu niedrig, das Bild wird abgeschnitten, die Breite passt.

Woran kann das liegen?

Die falsche Anzeige kommt wohl daher dass das Bild noch nicht geladen ist wenn die Lightbox geöffnet wird.
Somit wird eine falsche Größe gerechnet.

Habes es nun so gelöst, dass die Lightbox zeitverzögert geöffnet wird.

Ich hoffe das Javascript ist soweit korrekt?

PHP-Code:

---

<script>
(function($){
    setTimeout(function(){
    $(document).ready(function(){
        $.colorbox({
            inline:true,
            href:"#mb_popup",
            loop: false,
            maxWidth: '95%',
            maxHeight: '95%',
            opacity: 0.5
        });
    });
    }, 1000);
})(jQuery);
</script> 


---

Evtl. wäre das auch mit load, anstatt ready gegangen

PHP-Code:

---

$(document).load(function(){ ... 


---

Danke nochmal für die tolle Diskussion.

Nun würde ich gern folgendes noch bezwecken und zwar setze ich einen Cookie und das Pop Up wird erst nach 5 sec anzeigt.
Cookie wird nur 3 min gespeichert, aus test zwecken.

Code:

---

<script>
window.addEvent('load',function(){
if(Cookie.read('POPUP')) return;
Cookie.write('POPUP', '1',{duration: 0.001});
(function($){
        setTimeout(function(){
        $(document).ready(function(){
                $.colorbox({
                        inline:true,
                        href:"#mb_popup",
                        loop: false,
                        maxWidth: '95%',
                        maxHeight: '95%',
                        opacity: 0.3
                });
        })
  }, 5000);
})(jQuery);
});
</script>

<style>
    #mb_wrapper #mb_popup {
        display: none;
    }
</style>
<div id="mb_wrapper">
    <div id="mb_popup">{{insert_article::64}}</div>
</div>

---

Nun würde ich gern noch wollen, dass das Pop Up immer wieder automatisch aufgerufen wird, also immer nach 3 min oder so.
Kann mir da jemand helfen?

Alternativ ist die Frage ob es auch möglich ist den pop erst anzuzeigen wenn man ein wenig nach unten gescrollt hat?