Veröffentlichungsdatum: 06. April 2020
Änderungsdatum: 07. Juni 2024
weblication cms fancybox hinweisbox layer popup pop-up pop up aufrufe info vorschalten störer popup
Aktionen oder wichtige Ereignisse nach dem Seitenaufruf einer Seite vorschalten.
Aktionen oder wichtige Ereignisse lassen sich z.B. über einen Layer anzeigen, welche nach dem Seitenaufruf (z.B. der Startseite) der eigentlichen Seite "vorgeschaltet" wird.
Bei aktuellen BASE Projekten können Sie hierzu auf Standardmittel zurückgreifen, womit Sie direkt unten im entsprechenden Abschnitt starten können.
Eine Möglichkeit, eine Fancybox beim Aufruf einer Seite anzuzeigen, ist der Einsatz eines ausgeblendeten Links (über display:none), welcher über JavaScript nach dem Laden der Seite (DOM fertig aufgebaut) aufgerufen wird:
Fügen Sie dazu ein Link-Element (oder Bild-Element bzw. HTML Quelltext-Element) in die Seite ein und vergeben für das A-Tag bzw. IMG-Tag einen Namen (z.B. callFancy). Über eine style- bzw. class-Angabe setzen Sie das Element auf nicht sichtbar / unsichtbar. Bedenken Sie beim Einsatz eines Link-Elementes, daß Sie für den Editor die Anzeige aktivieren (z.B.: .weditor .elementLink_var10000 {display:block;} ).
Nachfolgend der Einfachheit halber beispielhaft über ein HTML Quelltext-Element umgesetzt:
<a style="display: none;" target="fancy" name="callFancy" href="https://www.weblication.de/?viewmode=blank" class="box">Weblication</a>
Nach diesem Element fügen Sie ein "Javascript einbinden" Element ein und setzen z.B. folgenden JavaScript-Code:
$(document).ready(function () { var callFancy = jQuery('a[name="callFancy"]'); callFancy.hide(); callFancy.trigger('click'); });
Dieses Beispiel wurde auf Grundlage eines BASE Classic Projektes getestet und nutzt zum Link target- und class-Angaben, welche in der design.js bereits für die Fancybox vorgesehen sind.
Das Beispiel kann individuell für das gewünschte Vorhaben abgeändert werden.
Achten Sie beim Einsatz von Bildern, daß diese ohne lazyload umgesetzt sind und somit sofort geladen werden.
Mit der Inhaltsbox-Variante 540 ("Hinweis als Infolayer mittig einblenden") erreichen Sie das Ziel mit Standard-Mitteln.
Achten Sie beim Einsatz von Bildern, daß diese ohne lazyload umgesetzt sind und somit sofort geladen werden. Im Bild-Element nutzen Sie hierzu die Untervariante 71 ("Bild nicht erst laden, wenn im Anzeigebereich"), welche Sie ggf. noch installieren müssen.
In einem aktuellen BASE (Mobile First) Projekt können Sie einfach das "JavaScript einbinden" Element/Weblic® verwenden und darüber folgende JS-Syntax eintragen:
jQuery(document).ready(function () { var optionsLightbox = {'variant':'box', 'href' : '/de/hinweis.php'}; return wLightbox('undefined', typeof(optionsLightbox) != 'undefined' ? optionsLightbox : {}); });
Wichtig:
Im JavaScript-Element sollten Sie über die Auswahlbox "Hier einbinden" wählen.
Zudem sollten Sie das zentrale jquery.js Skript referenzieren, was Sie über das Feld "Pfade der JavaScript Dateien" vornehmen können.
/[IHR-LAYOUT-PROJEKT]/wGlobal/layout/scripts/jquery.js
Pfade sind entsprechend Ihren Projektpfaden anzupassen.
Gekoppelt an einen Bedingten Container können Sie diesen Eintrag auch an eine Zeit koppeln.
Eine Möglichkeit der Umsetzung einer Hinweismeldung/-box kann auch der Weg über die design.js sein.
// ... jQuery(document).ready(function(){ // ... if(!sessionStorage.getItem('preContainerClosed')){ jQuery('#blockHeader').prepend('<div id="preContainer"><div id="preContainerContent">Rufen Sie uns an!</div><div id="preContainerCloser">x</div></div>'); jQuery('#preContainerCloser').on('click', function(){jQuery('#preContainer').remove();sessionStorage.setItem('preContainerClosed', true);}); } }); // ...
#preContainer {
width:100%;
border:1px solid orange;
background-color:tomato;
color:#FFFFCC;
padding:12px;
margin:0 auto;
text-align:center;
#preContainerContent {
display:inline-block;
text-align:center;
width:50%;
}
#preContainerCloser {
display:inline-block;
float:right;
margin:0 0 0 12px;
}
}