CSS Modal

Modal erstellt mit CSS und HTML5 von Werner-Zenk.de

Inklusive einer local Storage (Cookie) Funktion zur einmaligen Anzeige des Modals


Für eine Version mit Zeitabfrage guckt bitte hier

Klicke auf den Link unten, um das Modal zu öffnen:


 Local Storage (Cookie) löschen und Modal-Fenster somit erneut öffnen

X

Modal-Fenster

Dies ist ein modales Fenster, das mit HTML5 und CSS3 erstellt wurde.

Schließe am roten Kreuz, damit das Modal sich beim nächsten Seitenaufruf wieder öffnet oder schließe am blauen Button, damit ein Cookie gesetzt wird und sich dadurch das Modal nicht erneut öffnet.

Mit Cookie schließen

Modal an einem Button öffnen

Natürlich kann man anstelle eines Text-Links auch einen Button verwenden und als Link dann wieder
im "Mobirise-Link-Fenster" eintragen:
javascript: myModal();

Modal

Hier zur Info meine CSS für dieses "CSS Modal", die ich in den Code Editor in den Bereich CSS Editor kopiert habe:

.modalDialog {
  position: Fixed;
  font-family: Verdana, Sans-Serif;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 99999;
  opacity: 0;
  transition: opacity 400ms ease-in;
  pointer-events: None;
}
.modalDialog:target {
  opacity: 1;
  pointer-events: Auto;
}
.modalDialog > div {
  width: 500px;
  max-width: 90%;
  position: relative;
  margin: 10% Auto;
  padding: 20px 10px 20px 10px;
  border-radius: 30px;
  background-color: #FFFFFF;
  background: linear-gradient(#ffffff, #999999);
  cursor: Default;
}
.close {
  background-color: #ff0000;
  opacity: 1.0;
  color: #ffffff;
  line-height: 30px;
  width: 30px;
  position: Absolute;
  right: -12px;
  text-align: Center;
  top: -10px;
  text-decoration: None;
  font-size: 14px;
  font-weight: Bold;
  border-radius: 12px;
  box-shadow: 5px 5px 8px #000000;
}
.close:hover {
  background-color: #00D9FF;
}


Hier mein JavaScript zum Aufruf von diesem Modal, da der Anker sonst von Mobirise ignoriert wird. Kopiert das Script in die

> Seiteneinstellungen > "Inside <head> code"

<!-- Skript zum Aufruf der Anker ID vom Modal -->
<script>
      function myModal() {
      window.location.href = '#openModal';
      }
</script>

... oder so würde das Modal beim Aufruf der Seite automatisch erscheinen:

<!-- Skript zum automatischen Aufruf der Anker ID vom Modal -->
<script>
      function myModal() {
        window.location.href = '#openModal';
      }
      window.onload = myModal;
</script>


Hier die Ausgabe, die ich anstelle des Beispieltextes über den Code Editor in einen einfachen Textblock kopiert habe. Hier wird als Link die JavaScript-Funktion (oben) aufgerufen:

<!-- Beginn Anzeige vom Modal -->
<a href="javascript: myModal();">Modal-Fenster öffnen</a>
<div id="openModal" class="modalDialog">
 <div>
  <a href="#close" title="Schließen" class="close">X</a>
  <h1>Modal-Fenster</h1>
  <p>Dies ist ein modales Fenster, das mit HTML5 und CSS3 erstellt wurde.</p>
 </div>
</div>
<!-- Ende Anzeige vom Modal -->





Mit HTML5 Local Storage:

Hier die gleiche Ausgabe mit einem local Storage, also einer Art Cookie um das Popup nur einmalig anzuzeigen, bis die Cookies am Browser gelöscht werden, die ich hier an den Links zum Popup gleich selbst lösche, damit man das Fenster erneut sehen kann.

Ich habe hier ein local Storage JavaScript von Werner-Zenk.de etwas abgewandelt verwendet, das über die Funktion "akzeptieren()" am Button "Mit Cookie schließen" im Popup das Cookie aktiviert und sich dabei auf die id="dsvgo_hinweis" bezieht:


<!-- Beginn Anzeige vom Modal -->
<a href="javascript: myModal();">Modal-Fenster öffnen</a>
<div id="dsgvo_hinweis">
  <div id="openModal" class="modalDialog">
   <div>
    <a href="#close" title="Schließen" class="close">X</a>
    <h1>Modal-Fenster</h1>
    <p>Dies ist ein modales Fenster, das mit HTML5 und CSS3 erstellt wurde.</p>
    <p><a href="javascript:akzeptieren();" class="btn btn-primary btn-sm">Mit Cookie schließen</a></p>
   </div>
  </div>
</div>
<!-- Ende Anzeige vom Modal -->


Das JavaScript zur Funktion "akzeptieren()" gehört in die Seiteneinstellungen in den Bereich "Inside <head> code":

<script>
window.addEventListener("DOMContentLoaded", function () {
 if ('localStorage' in window &&
     window['localStorage'] !== null) {
  if (window.localStorage.getItem("DSGVO")) {
   document.getElementById("dsgvo_hinweis").style.display="none";
  }
 }
});
function akzeptieren() {
 if ('localStorage' in window &&
     window['localStorage'] !== null) {
  window.localStorage.setItem("DSGVO", "true");
  document.getElementById("dsgvo_hinweis").style.display="none";
 }
}
</script>