Hinweisbox bei Aufruf einer Seite / Layer für Aktionen

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.

Tipp

Bei aktuellen BASE Projekten können Sie hierzu auf Standardmittel zurückgreifen, womit Sie direkt unten im entsprechenden Abschnitt starten können.

Allgemein / BASE Classic

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.

Störer / Hinweis-Seite in Mobile First

Einbindung über eine Inhaltsbox

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.

Einbindung über JavaScript

Möglichkeit 1: JavaScript einbinden Element

In einem aktuellen BASE (Mobile First) Projekt können Sie einfach das "JavaScript einbinden" Element/Weblic® verwenden und darüber folgende JS-Syntax eintragen:

Beispiel: Auszug aus einem JavaScript einbinden Element

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.

Möglichkeit 2: Einbinden über design.js

Eine Möglichkeit der Umsetzung einer Hinweismeldung/-box kann auch der Weg über die design.js sein.

Beispiel: Auszug aus der design.js zum onReady-Event

// ...
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);});

  }
  
});
// ...

Beispiel: Auszug aus additional.scss zu JS-Umsetzung

#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;
  }
}