Wie fügt man ein Pop-up auf der Website hinzu?

Ein Pop-up ist eine großartige Möglichkeit, allen Besuchern deiner Website eine wichtige Information anzuzeigen – z. B. Hinweise oder Sonderaktionen.

Wenn du ein Pop-up auf deiner Seite hinzufügen möchtest, folge diesen Schritten:

1. JavaScript-Code in custom.js einfügen

Füge diesen Code in der Sektion Für Entwickler in die Datei custom.js ein. So wird das Pop-up beim Laden der Seite eingeblendet.

$(document).ready(function() {
  // Gib hier die Seite an, auf der das Pop-up angezeigt werden soll
  if (window.location.href === "https://event.conrego.app/") {

    // Pop-up beim Laden der Seite anzeigen
    $('#popup-overlay').fadeIn();

    // Pop-up schließen beim Klick oder Touch auf den Button
    $('#popup-close').on('click touchstart', function() {
      $('#popup-overlay').fadeOut();
    });
  }
});

2. CSS-Styling in custom.css einfügen

Füge diesen Stilcode in custom.css ein, um das Layout des Pop-ups und des Hintergrundes zu definieren:

/* Stil für den Pop-up-Hintergrund */
#popup-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
    overflow-y: auto; /* Ermöglicht vertikales Scrollen im Pop-up */
}

/* Stil für das Pop-up selbst */
#popup {
    position: relative;
    margin: 5% auto;
    background-color: white;
    padding: 20px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    border-radius: 10px;
    z-index: 1100;
}

#popup p {
  font-size: 14px;
  line-height: 1.5;
  margin-bottom: 10px;
}

#popup-close {
 display: block;
 margin: 10px auto 0;
 padding: 10px 20px;
 background-color: #e22989; /* Farbe des Buttons */
 color: white;
 text-align: center;
 border: none;
 border-radius: 5px;
 cursor: pointer;
 text-decoration: none;
 font-size: 14px;
}

#popup-close:hover {
    background-color: #7cc9de; /* Hover-Farbe des Buttons */
}

@media (max-height: 600px) {
    #popup {
        max-height: 90%;
        overflow-y: auto; /* Scrollen aktivieren */
    }
}

3. HTML-Markup in header.html einfügen

Füge folgenden HTML-Code in die Datei header.html ein:

<div id="popup-overlay">
    <div id="popup">
      <p>
        Hier deinen Text einfügen
      </p>
        <a id="popup-close">Schließen</a>
    </div>
</div>

Gehe nun auf deine Website und teste, wie dein Pop-up angezeigt wird. Ein Pop-up kann die Kommunikation mit deinen Teilnehmern verbessern – nutze es gezielt und effektiv!