JavaScript Popup ein Div-Element in der Mitte der Webseite

Tahseen Tauseef 12 Oktober 2023

JavaScript jQuery HTML JavaScript Popup

Was ist ein Popup
Ein Popup gestalten
Popup in JavaScript öffnen und schließen
Popup öffnen und schließen mit jQuery

In diesem Tutorial erfahren Sie, wie Sie ein Pop-Fenster in der Mitte der Webseite öffnen. Zunächst müssen wir in diesem Artikel die folgenden Fragen ansprechen:

Was ist ein Popup
Gestalten eines Popups
Popup in JavaScript öffnen und schließen
Popup mit jQuery öffnen und schließen

Ein Popup ist ein kleines Fenster oder eine kleine Box, die sich in einem Fenster über dem darunter liegenden Inhalt öffnet.

Der Hauptanwendungsfall für die Verwendung eines Popups besteht darin, sich auf bestimmte Informationen und nicht auf den gesamten Inhalt zu konzentrieren und einen Benutzer zur Bestätigung aufzufordern. Alternativ wird ein Popup auch als Modal bezeichnet.

Wie ein Popup gestylt ist, ist nur aus dem Grund wichtig, dass es über dem Hauptinhalt angezeigt werden soll oder zumindest die Illusion erwecken muss, dass es über dem Hauptinhalt steht. Wir werden anhand des folgenden Beispiels sehen, wie das geht:

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <style>
      html,
      body {
        height: 100%;
      }
      .overlay {
        position: absolute;
        display: none;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: rgba(0, 0, 0, 0.8);
        z-index: 2;
      }

      .popup {
        position: absolute;
        width: 50%;
        height: 50%;
        top: 25%;
        left: 25%;
        text-align: center;
        background: white;
      }
     
      .popup h3 {
        font-size: 15px;
        height: 50px;
        line-height: 50px;
        color: black;
      }
      .CloseIcon{
        cursor: pointer;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="overlay" id="overlay">
      <div class="popup">
        <div onclick="CloseModal()" class="CloseIcon">&#10006;</div>
        <h3>Popup Content</h3>
      </div>
    </div>
    <button onclick="OpenModal()">Show PopUp</button>
  </body>
</html>

In diesem einfachen Beispiel haben wir eine Schaltfläche erstellt, die das Popup anzeigt. Aber am wichtigsten ist, dass wir ein overlay-Element haben, das vor allem den Inhalt in einer leichten schwarzen Farbe darstellt, wodurch es für den Benutzer schwierig wird, diesen Inhalt zu sehen.

Dann haben wir ein popup-Element erstellt und es so gestaltet, dass es über dem overlay-Element und der Mitte der Webseite erscheint. Dabei ist es uns gelungen, den Hauptinhalt auszublenden.

Wenn sich ein Popup in der Mitte des Bildschirms öffnet, erregt es die Aufmerksamkeit des Benutzers, da dies das einzige ist, was ein Benutzer klar sehen wird. Aber das overlay-Element ist auf none gesetzt, also wird es im Moment nicht angezeigt.

Die Frage ist, wie schalten wir ein Popup um? Wir können das tun, indem wir JavaScript oder jQuery verwenden. Lassen Sie uns beide im Folgenden im Detail besprechen.

Wir können JavaScript verwenden, um die Popup-Stileigenschaft umzuschalten. Wir können dies tun, indem wir auf das DOM-Element und seine Eigenschaft style zugreifen und den Typ display von none auf blockändern, damit das Popup angezeigt wird.

In ähnlicher Weise könnten wir wieder zu none wechseln, sobald der Benutzer auf das Schließen-Symbol klickt. Lassen Sie uns dies an einem Beispiel veranschaulichen.

function OpenModal() {
  let element = document.getElementById('overlay')
  element.style.display = 'block'
}
function CloseModal() {
  let element = document.getElementById('overlay')
  element.style.display = 'none'
}

Alternativ könnten wir dasselbe mit jQuery wiederholen. Werfen wir einen Blick auf den Quellcode und die erforderlichen Änderungen.

function OpenModal() {
  $('#overlay').show();
}
function CloseModal() {
  $('#overlay').hide();
}

In diesem Beispiel haben wir die jQuery-Methode show und hide verwendet. Anstatt die Eigenschaft von display von none auf block zu ändern, entfernt show die Eigenschaft display von element, und ähnlich setzt hide die Eigenschaft display auf none.

Hinweis

Das show funktioniert nur mit display:none oder mit jQuery ausgeblendeten Items; es funktioniert nicht mit der CSS-Eigenschaft visibility.

Stellen Sie außerdem sicher, dass Sie das jQuery-CDN im Header hinzufügen (oder das jQuery-Paket installieren), wenn Sie jQuery verwenden.

Was ist ein Popup

Ein Popup gestalten

Popup in JavaScript öffnen und schließen

Popup öffnen und schließen mit jQuery

Verwandter Artikel - JavaScript Popup