JavaScript Pop-up ein Div-Element in der Mitte der Webseite

  2. How-To's
  3. JavaScript-Anleitungen
  4. JavaScript Pop-up ein Div-Element in der …
Tahseen Tauseef 12 Oktober 2023
JavaScript JavaScript Popup
  1. Gestalten eines Pop-ups in HTML
  2. Pop-Up in JavaScript öffnen und schließen
  3. Öffnen und schließen Sie Pop-ups mit jQuery
JavaScript Pop-up ein Div-Element in der Mitte der Webseite

In diesem Tutorial-Artikel werden wir besprechen, wie man ein Pop-Fenster in der Mitte der Webseite öffnet.

Ein Pop-up ist ein kleines Fenster oder eine kleine Box, die sich in einem Fenster über dem darunter liegenden Inhalt öffnet. Der Hauptanwendungsfall der Verwendung eines Pop-ups besteht darin, sich auf bestimmte Informationen und nicht auf den gesamten Inhalt zu konzentrieren, z. B. um einen Benutzer zur Bestätigung aufzufordern. Alternativ wird ein Pop-up auch als Modal bezeichnet.

Gestalten eines Pop-ups in HTML

Wie ein Pop-up 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 sehen, wie das mit dem folgenden Beispiel 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: #fff;
        background: white;
      }
    </style>
    <title>Document</title>
  </head>
  <body>
    <div class="overlay">
      <div class="popup">
        <div onclick="CloseModal()">&#10006;</div> <!-- Shows Close Icon -->
        <h3>Popup Content</h3>
      </div>
    </div>
    <button onclick="OpenModal()">Show PopUp</button>
  </body>
</html>

In diesem einfachen Beispiel haben wir also eine Schaltfläche erstellt, die zum Anzeigen des Popups verwendet wird.

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.

Wir haben ein popup-Element erstellt und es so gestaltet, dass es über dem overlay-Element und in 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 kann. Aber ein kurzer Hinweis, falls Sie es verpasst haben, das Element overlay ist auf none gesetzt, sodass es jetzt im Moment angezeigt wird.

Daher stellt sich die Frage, wie schalten wir ein Popup um? Wir können dies tun, indem wir JavaScript oder jQuery verwenden. Lassen Sie uns beide im Folgenden im Detail besprechen

Pop-Up in JavaScript öffnen und schließen

Wir können JavaScript verwenden, um die Stileigenschaft eines Popups umzuschalten. Wir können dies tun, indem wir auf das DOM-Element und dann auf seine Eigenschaft Stil zugreifen und dann den Typ Anzeige von none auf blockändern, damit das Popup angezeigt wird hoch. In ähnlicher Weise könnten wir es wieder auf noneändern, sobald der Benutzer auf das Schließen-Symbol klickt. Schauen wir uns das an einem Beispiel an

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

Öffnen und schließen Sie Pop-ups mit jQuery

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 Methoden show und hide von jQuery 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 Eigenschaft Sichtbarkeit von CSS.

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

Verwandter Artikel - JavaScript Popup