Contao-Camp 2024
Ergebnis 1 bis 26 von 26

Thema: Automatisches Popup (zb. "neue Adresse") einbinden

  1. #1
    Contao-Fan Avatar von stefan.sl
    Registriert seit
    19.06.2009.
    Ort
    Iserlohn
    Beiträge
    352
    Partner-ID
    1371

    Standard 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!
    Geändert von stefan.sl (13.03.2015 um 13:59 Uhr)

  2. #2
    Contao-Fan Avatar von gregor
    Registriert seit
    20.06.2009.
    Ort
    Frankfurt am Main
    Beiträge
    553

    Standard

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

  3. #3
    Administrator Avatar von xchs
    Registriert seit
    19.06.2009.
    Beiträge
    14.545
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    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
    Contao Community Administrator

    [Unterstützungsmöglichkeiten]

  4. #4
    Contao-Fan Avatar von RainerG
    Registriert seit
    22.05.2011.
    Ort
    Hannover
    Beiträge
    848

    Standard

    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
    Rainer G. aus H.
    www.BunteReisebilder.de

  5. #5
    Contao-Fan Avatar von stefan.sl
    Registriert seit
    19.06.2009.
    Ort
    Iserlohn
    Beiträge
    352
    Partner-ID
    1371

    Standard

    Zitat Zitat von RainerG Beitrag anzeigen
    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.

  6. #6
    Contao-Fan Avatar von RainerG
    Registriert seit
    22.05.2011.
    Ort
    Hannover
    Beiträge
    848

    Standard

    Coooooooooool!

    Klappt so wie ich es mir gewünscht habe!

    Großes THX!
    Rainer G. aus H.
    www.BunteReisebilder.de

  7. #7
    Contao-Nutzer
    Registriert seit
    03.11.2011.
    Beiträge
    104

    Standard

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

  8. #8
    Contao-Fan Avatar von stefan.sl
    Registriert seit
    19.06.2009.
    Ort
    Iserlohn
    Beiträge
    352
    Partner-ID
    1371

    Standard

    Zitat Zitat von jack_typewriter Beitrag anzeigen
    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

    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
    Geändert von stefan.sl (25.02.2016 um 15:33 Uhr)

  9. #9
    Contao-Fan Avatar von stefan.sl
    Registriert seit
    19.06.2009.
    Ort
    Iserlohn
    Beiträge
    352
    Partner-ID
    1371

    Standard

    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>

  10. #10
    Contao-Urgestein Avatar von tblumrich
    Registriert seit
    25.06.2009.
    Ort
    Feldberger Seenlandschaft
    Beiträge
    2.224
    Partner-ID
    7979
    User beschenken
    Wunschliste

    Standard

    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
    blucomp | Webdesign & Onlinelösungen

  11. #11
    Contao-Urgestein Avatar von tblumrich
    Registriert seit
    25.06.2009.
    Ort
    Feldberger Seenlandschaft
    Beiträge
    2.224
    Partner-ID
    7979
    User beschenken
    Wunschliste

    Standard

    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
    blucomp | Webdesign & Onlinelösungen

  12. #12
    Contao-Fan Avatar von stefan.sl
    Registriert seit
    19.06.2009.
    Ort
    Iserlohn
    Beiträge
    352
    Partner-ID
    1371

    Standard

    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
    Geändert von stefan.sl (16.06.2015 um 19:05 Uhr)

  13. #13
    Contao-Fan
    Registriert seit
    26.05.2013.
    Ort
    Berlin
    Beiträge
    381

    Standard

    ich bin gerade mal dabei den vorschlag von @stefan.sl zu testen, aber wo finde ich das Feld body-onload
    In das Feld body-onload kommt dann folgendes rein:
    HTML-Code:
    Mediabox.open('#mb_popup', '', '300 262');return false;

  14. #14
    Community-Moderator Avatar von stefan-at-work
    Registriert seit
    05.06.2009.
    Ort
    Bad Segeberg
    Beiträge
    1.779
    Partner-ID
    634

    Standard

    @VGT Themes -> Seitenlayout -> Experteneinstellungen

  15. #15
    Contao-Fan
    Registriert seit
    26.05.2013.
    Ort
    Berlin
    Beiträge
    381

    Standard

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

  16. #16
    Contao-Nutzer Avatar von maipe
    Registriert seit
    10.07.2012.
    Ort
    München
    Beiträge
    201

    Standard Colorbox

    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;

  17. #17
    Contao-Fan Avatar von stefan.sl
    Registriert seit
    19.06.2009.
    Ort
    Iserlohn
    Beiträge
    352
    Partner-ID
    1371

    Standard

    Zitat Zitat von maipe Beitrag anzeigen
    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

  18. #18
    Contao-Nutzer Avatar von maipe
    Registriert seit
    10.07.2012.
    Ort
    München
    Beiträge
    201

    Standard Contao 3.2.21

    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>

  19. #19
    Contao-Nutzer Avatar von maipe
    Registriert seit
    10.07.2012.
    Ort
    München
    Beiträge
    201

    Standard Kein Inhalt

    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.
    Geändert von maipe (05.11.2015 um 14:18 Uhr)

  20. #20
    Contao-Fan Avatar von stefan.sl
    Registriert seit
    19.06.2009.
    Ort
    Iserlohn
    Beiträge
    352
    Partner-ID
    1371

    Standard

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

  21. #21
    Contao-Nutzer Avatar von maipe
    Registriert seit
    10.07.2012.
    Ort
    München
    Beiträge
    201

    Standard GELÖST -

    Zitat Zitat von stefan.sl Beitrag anzeigen
    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.
    Geändert von maipe (06.11.2015 um 13:38 Uhr)

  22. #22
    Contao-Fan Avatar von stefan.sl
    Registriert seit
    19.06.2009.
    Ort
    Iserlohn
    Beiträge
    352
    Partner-ID
    1371

    Standard

    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

  23. #23
    Contao-Nutzer
    Registriert seit
    08.11.2009.
    Beiträge
    191

    Standard

    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?

  24. #24
    Contao-Nutzer
    Registriert seit
    08.11.2009.
    Beiträge
    191

    Standard

    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",
                
    loopfalse,
                
    maxWidth'95%',
                
    maxHeight'95%',
                
    opacity0.5
            
    });
        });
        }, 
    1000);
    })(
    jQuery);
    </script> 

  25. #25
    Contao-Urgestein Avatar von Andreas
    Registriert seit
    19.06.2009.
    Ort
    Mönchengladbach
    Beiträge
    7.703
    User beschenken
    Wunschliste
    Contao-Projekt unterstützen

    Support Contao

    Standard

    Evtl. wäre das auch mit load, anstatt ready gegangen
    PHP-Code:
    $(document).load(function(){ ... 
    Bitte!
    Vor Anfragen im Forum HTML validieren.
    Codesnippets hier im Froum sauber einrücken. Nur Tabs o. nur Leerzeichen verwenden.

    Vielen Dank an alle Wunschlistenerfüller
    Andreas Burg, Web Solutions

  26. #26
    Contao-Fan
    Registriert seit
    28.09.2010.
    Ort
    Leipzig
    Beiträge
    461

    Standard

    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?

Aktive Benutzer

Aktive Benutzer

Aktive Benutzer in diesem Thema: 1 (Registrierte Benutzer: 0, Gäste: 1)

Lesezeichen

Lesezeichen

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •