Ganz einfaches Popup ohne Plugin mit Close-Btn.

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.

Zusätlich hat es oben das bekannte Close-X, und die Möglichkeit es durch Klick auf einen Btn oder Link zu öffnen.

Hier ist in das Popup zusätzlich ein Bild integriert.

Das ist der Code für den Button oben links

<button onclick="document.getElementById('custom-popup').style.display = 'flex';">
  Popup öffnen
</button>

Html-Code für das Popup

<div id="custom-popup" class="popup-overlay">
  <div class="popup-content">
    <!-- Schließen-Symbol oben rechts -->
    <span class="close-popup">×</span>
    
    <!-- Popup-Inhalt -->
    <h2>Popup Titel</h2>
    
    <p>Hier steht der Popup-Inhalt. Füge hier deinen Text oder weitere Elemente ein.</p>
    <img src="/wp-content/uploads/2024/11/IMG_1519.webp" alt="Popup Bild" style="max-width: 100%; height: auto; border-radius: 8px;">
    
    <!-- Link-Button -->
    <a href="https://example.com" class="popup-link-button">Mehr erfahren</a>
  </div>
</div>

CSS für Styling und Positionierung

/* Popup-Overlay */
.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 */
.popup-content {
  position: relative;
  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;
}

/* "X"-Symbol oben rechts */
.close-popup {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 24px;
  color: #333;
  cursor: pointer;
  font-weight: bold;
}

.close-popup:hover {
  color: #ff4444;
}

/* Link-Button unten */
.popup-link-button {
  display: inline-block;
  background-color: #007BFF; /* Blau */
  color: white;
  text-decoration: none;
  padding: 10px 20px;
  border-radius: 5px;
  font-size: 16px;
  margin-top: 20px;
}

.popup-link-button:hover {
  background-color: #0056b3; /* Dunkleres Blau beim Hover */
}

JavaScript für die Funktionalität

document.addEventListener('DOMContentLoaded', function() {
  // Popup öffnen (z. B. nach 3 Sekunden anzeigen)
  setTimeout(function() {
    document.getElementById('custom-popup').style.display = 'flex';
  }, 1000);

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

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