Einfaches Popup ohne Plugin | Wordpress und Divi Tricks

Ganz einfaches Popup ohne Plugin

Hier ist ein Muster für ein einfaches, sich selbst öffnendes, Popup, das ganz ohne Plugin auskommt.

Es öffnet sich automatisch nach einer Sekunde und schließt sich wenn man irgendwo auf die Seite klickt. Die Verzögerung des Öffnens kann man im Script beliebig verändern.

Ganz einfaches Popup Download als json-Datei für DIVI-4 mit DIVI-5-Alpha getestet

Hier kannst Du direkt die ganze Section Popup herunterladen.

Vorgehensweise:

Zip-Datei entpacken. Dann die json-Datei in die DIVI-Bibliothek hochladen. Es ist eine Section. Diese Section dann auf beliebige Seite Deiner Website hochladen.

Html-Code für das Popup

<div id="custom-popup" class="popup-overlay">
  <div class="popup-content">
    <span class="close-popup">×</span>
    <h2>Popup Titel</h2>
    <p>Hier steht der Popup-Inhalt. Du kannst hier auch Buttons, Links oder Bilder einfügen.</p>
  </div>
</div>

CSS für Styling und Positionierung

.popup-overlay {
  display: none; /* Standardmäßig versteckt */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  max-width: 500px;
  width: 90%;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
}

.close-popup {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  cursor: pointer;
}

JavaScript für die Funktionalität

document.addEventListener('DOMContentLoaded', function() {
  // Popup öffnen (Beispiel: Nach 3 Sekunden anzeigen)
  setTimeout(function() {
    document.getElementById('custom-popup').style.display = 'flex';
  }, 3000);

  // Popup schließen
  document.querySelector('.close-popup').addEventListener('click', function() {
    document.getElementById('custom-popup').style.display = 'none';
  });

  // Optional: Popup schließen, wenn außerhalb geklickt wird
  document.getElementById('custom-popup').addEventListener('click', function(e) {
    if (e.target === this) {
      this.style.display = 'none';
    }
  });
});