CSS Modal

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

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


Modal-Fenster öffnen

X

Modal-Fenster

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


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 -->