Standard jquery automatisches overlay contao 3.4.3

**Potti2012** · 10.05.2016, 19:28

Hallo Zusammen,
weiß jemand wie man so ein nerviges Popup Fenster erstellt, dass bei jedem Laden der Seite angezeigt wird?
Die Erweiterung srlayer funktioniert bei mir nicht, denke, dass es an der contao version liegt.
Bin für jeden Tip dankbar.

**Andreas** · 10.05.2016, 23:15

Habe die srlayer 3.0.1 gerade in 3.5.12 probiert, das geht. Ich vermute, dass du kein MooTools geladen hast.

Siehe auch hier: https://github.com/srhinow/srlayer/issues

Da sind noch ein paar kleine ungefixte Bugs, die man schnell beheben kann.

**marq** · 11.05.2016, 17:50

Hier mal ein einfacher weg, zwar so in der Form ungetestet, aber könnte so gehen... (habe dafür ein eigenes Modul was das erledigt).

1. Im Seitenlayout:
jQuery und colorbox aktivieren.

Eigenes Javascript:

Code:

<script>
		jQuery(document).ready(function($){ 
		var jpOptions = {
		inline:true,
	  	width: '95%',
	  	height: '95%',
	  	maxWidth: '660px',
	  	maxHeight: '480px',
	  	href :'#jp'
		}
		$.colorbox(jpOptions);
	});

	$(window).resize(function(){
    	$.colorbox.resize({
      	width: window.innerWidth > parseInt(jpOptions .maxWidth) ? jpOptions .maxWidth : jpOptions .width,
      	height: window.innerHeight > parseInt(jpOptions .maxHeight) ? jpOptions .maxHeight : jpOptions .height
    	});
	});
</script>

2. In der Artikelübersicht:
Im Artikel für die Seite wo das Popup angezeigt werden soll das Modultyp HTML auswählen und das hier reinschreiben

HTML-Code:

<div class="invisible">
<div id="jpbox"><div class="ce_text">Ich bin ein nerviges Popup</div></div>
</div>

Done. Lass mich wissen obs klappt :-)

**Potti2012** · 11.05.2016, 18:04

Hallo marq,

das geht leider nicht. Colorbox ist nicht mit meiner version kompatibler und die jquery version, die sie mit sich bringt führt dazu, dass dann meine ganze webseite nciht mehr ausgeben wird.

Viele Grüße!

Zitat von marq

Hier mal ein einfacher weg, zwar so in der Form ungetestet, aber könnte so gehen... (habe dafür ein eigenes Modul was das erledigt).

1. Im Seitenlayout:
jQuery und colorbox aktivieren.

Eigenes Javascript:

Code:

<script>
		jQuery(document).ready(function($){ 
		var jpOptions = {
		inline:true,
	  	width: '95%',
	  	height: '95%',
	  	maxWidth: '660px',
	  	maxHeight: '480px',
	  	href :'#jp'
		}
		$.colorbox(jpOptions);
	});

	$(window).resize(function(){
    	$.colorbox.resize({
      	width: window.innerWidth > parseInt(jpOptions .maxWidth) ? jpOptions .maxWidth : jpOptions .width,
      	height: window.innerHeight > parseInt(jpOptions .maxHeight) ? jpOptions .maxHeight : jpOptions .height
    	});
	});
</script>

2. In der Artikelübersicht:
Im Artikel für die Seite wo das Popup angezeigt werden soll das Modultyp HTML auswählen und das hier reinschreiben

HTML-Code:

<div class="invisible">
<div id="jpbox"><div class="ce_text">Ich bin ein nerviges Popup</div></div>
</div>

Done. Lass mich wissen obs klappt :-)

**Potti2012** · 11.05.2016, 18:10

Hallo Andreas,

doch - mootools ist aktiviert, ich bekomme aber dennoch keine Ausgabe des SRLAYER :-( Das ist die Seite um die es sich dreht.
http://www.highlight-og.de/

Zitat von Andreas

Habe die srlayer 3.0.1 gerade in 3.5.12 probiert, das geht. Ich vermute, dass du kein MooTools geladen hast.

Siehe auch hier: https://github.com/srhinow/srlayer/issues

Da sind noch ein paar kleine ungefixte Bugs, die man schnell beheben kann.

**marq** · 11.05.2016, 18:10

Ich glaube bei 3.4 gab es mal nen Problem, dass sich jQuery und Mootools behäddert haben und die colorbox müsste eigentlich auch schon dabei gewesen sein. Ich würde dann von nen grundlegenden Problem ausgehen, Edit: was an der Vielzahl des wilden mixup von jQuery,Mootools auf deiner Seite liegen könnte

also auch wenns im noConflict-mode läuft, aber irgendwo fetzt es immer was um :-)

Wen du es halt mit srlayer machen willst, dann einfach debuggen und im Grundgerüst der Seite mal aufräumen könnte nicht schaden...

**Andreas** · 11.05.2016, 19:54

Zitat von Potti2012

mootools ist aktiviert, ich bekomme aber dennoch keine Ausgabe des SRLAYER http://www.highlight-og.de/

Ups, sieht alles ein bisschen chaotisch aus.

Validiere mal den Code und behebe die doppelten IDs. Und wer haut dir denn da align="center" in ein P-Tag?

Alle JS-Templates im Layout anzuhaken die du dort finden kannst ist auch keine gute Idee. Entscheide dich für nur einen Slider, nur ein Akkordeon, nur ein Tablesort, nur eine Lightbox (colorbox, mediabox o. slimbox [die slimbox wirft einen Fehler]). Brauchst du Chosen überhaupt?

Du solltest die JS-Bibliotheken auch nicht von Fremddomains laden, sondern von deinem Server.

Jetzt das eigentliche: Ich kann nichts von srl im Quellcode finden. Hast du denn auch ein FE-Modul für den Layer erstellt und den dann auch in einem Inhaltsselement oder im Layout eingebunden?

**soweit_ok** · 12.05.2016, 14:37

An sich eigentlich einfach, hab ich die Tage grad mal wieder gemacht, bloß nicht onload, aber egal. Die Colorbox ist vllt. nicht ideal, weil einiges Gedöns dranhängt, das man womöglich für ein simples PopUp garnicht haben will.

Deine kleine Aufgabe ließe sich so erledigen ...
- Ein Div-Element anlegen, als Modul "eigener HTML-Code" oder in der Quellcodeansicht der Inhaltselements "Text" ein DIV mit einer Klasse oder Id herumlegen.
Das Inhaltselement auf display:none setzen. Dann onload mit jQuery anzeigen ... $(".meinPopUp").show
- In das Div evtl. ein Unterelement einbauen und dieses bei Klick mit $"(.meinPopUp").hide verbinden. Irgendwie muss es ja geschlossen werden können. Falls Du auch bei Klick außerhalb des PopUps das Teil schließen möchtest, müsstest Du noch ein weiteres Div als Wrapper herumlegen und mit position:fixed;width:100%;height:100% formatieren, sowie mittels z-index das PopUp über den Wrapper stapeln. Den Wrapper muss man ja garnicht sehen. Bei Klick auf den Wrapper ggf. beide Elemente schließen.
- Um das PopUp horizontal wie vertikal responsiv immer mittig anzuzeigen oder an einer ansonsten gewünschten Position: .meinPopup{position:absolute;top:50%;transformY("5 0%");left:50%;transformX("50%"). Falls das PopUp etwas höher als mittig stehen soll, nur den top-Wert minimal verringern.
- Mitunter kann es sich empfehlen, body oder das Parent-Element auf overflow:hidden zu setzen, solange das PopUp angezeigt wird und nach Schließen dann wieder auf overflow:auto oder was man halt will. Vor allem falls der Fensterinhalt länger geraten kann als das Fenster.

Das war´s.

**VGT** · 12.05.2016, 21:50

vielleicht auch ein Vorschlag: ich habe den jQuery Dialog im Seitenlayout verwendet und der Dialoginhalt wird aus einem Textelement eingebunden; wenn ich das Textelement sichtbar schalte, wird die Dialogbox auch angezeigt; Popup-Blocker können die Dialogbox nicht verhindern; Seitenhintergrund wird transparent hinter dem Dialog eingeblendet, ist aber inaktiv. Zusätzlich wird der Dialog mit fade-Effekt ein- und ausgeblendet sowie per Cookie zeitlich gesteuert; diesen Dialog benutze ich aber nur sehr selten für wichtige Infos, weil solche Fenster echt nerven können
Nachtrag: die Lösungen unter https://community.contao.org/de/show...l=1#post176971 funktionierten nicht so richtig

**soweit_ok** · 13.05.2016, 16:23

@VGT:

Doch, die Lösung des verlinkten Postings funktioniert ebenfalls. Dabei handelt es sich allerdings um die auf MooTools basierte Lightbox, es müsste dafür also auch die MooTools-Bibliothek geladen werden. Aber auch, falls im Layout Moo + jQuery geladen wird - Moo ist z. B. bei Verwendung der Isotope-Erweiterung auf deren Modulseiten leider bisher noch zwingend, wäre eine Gemischt-Verwendung von Tools beider Frameworks trotz Kompatibilitätsmodus nur sehr bedingt empfehlenswert. Kann dennoch Konflikte geben.

Logisch, dass PopUp-Blocker nur native Fenster verhindern können und keine internen Inhaltselemente. Alles andere wäre auch absurd, daneben vor allem rechtswidriger Eingriff in die Hoheitsrechte von Webseitenbetreibern. Den von Ad-Servern massenhaft verbreiteten Werbemüll mit geeigneten Tools zu blockieren, ist hingegen völlig legitim. Weil Seitenbesucher wegen der erwarteten Inhalte kommen und dabei keinen von Affiliate-Netzwerken überregional verbreiteten Werbespam hinnehmen müssen, bloß weil viele Webseitenbetreiber offen oder verkappt damit Provisionen einstreichen wollen. Adblocker schützen mithin Besucherrechte, denn als Webseiteneigner habe ich nur die Rechte an den eigenen Inhalten und den Besuchern aufgezwungener fremder Content darf deshalb rechtskonform geblockt werden. Im selben Sinne können und dürfen auch Adblocker nicht verboten werden.

**esther** · 12.10.2022, 13:59

Zitat von marq

Hier mal ein einfacher weg, zwar so in der Form ungetestet, aber könnte so gehen... (habe dafür ein eigenes Modul was das erledigt).

1. Im Seitenlayout:
jQuery und colorbox aktivieren.

Eigenes Javascript:

Code:

<script>
		jQuery(document).ready(function($){ 
		var jpOptions = {
		inline:true,
	  	width: '95%',
	  	height: '95%',
	  	maxWidth: '660px',
	  	maxHeight: '480px',
	  	href :'#jpbox'
		}
		$.colorbox(jpOptions);
	});

	$(window).resize(function(){
    	$.colorbox.resize({
      	width: window.innerWidth > parseInt(jpOptions .maxWidth) ? jpOptions .maxWidth : jpOptions .width,
      	height: window.innerHeight > parseInt(jpOptions .maxHeight) ? jpOptions .maxHeight : jpOptions .height
    	});
	});
</script>

2. In der Artikelübersicht:
Im Artikel für die Seite wo das Popup angezeigt werden soll das Modultyp HTML auswählen und das hier reinschreiben

HTML-Code:

<div class="invisible">
<div id="jpbox"><div class="ce_text">Ich bin ein nerviges Popup</div></div>
</div>

Done. Lass mich wissen obs klappt :-)

Du bist mein Held, genau das habe ich gesucht <3 Nur musste ich noch die ID (rot) anpassen, die hat nicht übereingestim mit dem was du im HTML Modul angegeben hast. Sonst alles tip top.