JavaScript Popup Ein DIV -Element in der Mitte der Webseite

Während des Erstellens von Websites mit zusätzlichen Funktionen gibt es verschiedene Anforderungen, um eine Webseite insgesamt attraktiv zu machen, um die Aufmerksamkeit des Benutzers zu erregen. Zum Beispiel eine wichtige Nachricht anzeigen oder den Benutzer über eine Warnung oder Warnung informieren. In solchen Szenarien ist es eine praktische Funktion, ein DIV -Element in der Mitte der Webseite mit JavaScript zu tauchen.

In diesem Blog werden die Methoden erläutert, um ein DIV -Element im Zentrum der Webseite in JavaScript aufzunehmen.

So popupieren Sie ein Div -Element in der Mitte der Webseite in JavaScript?

Um ein DIV -Element im Zentrum der Webseite in JavaScript aufzunehmen, können die folgenden Methoden angewendet werden:

• “dokumentieren.QuerySelector ()" Methode
• “dokumentieren.GetElementById ()" Methode
• “JQuery”

Die genannten Ansätze werden nacheinander nachgewiesen!

Methode 1: Popup ein Div -Element im Zentrum der Webseite in JavaScript mit dem Dokument.QuerySelector () -Methode

Der "dokumentieren.QuerySelector ()Die Methode holt das erste Element ab, das dem entsprechenden CSS -Selektor entspricht. Diese Methode kann verwendet werden, um auf die zuzugreifendivElement, um auf die entsprechenden Funktionen zuzugreifen und sie anzuzeigen.

Syntax

dokumentieren.QuerySelector (CSS -Selektoren)

Hier beziehen sich CSS -Selektoren auf “div”, Auf das zugegriffen wird.

Das folgende Beispiel erklärt das angegebene Konzept.

Beispiel
Zunächst zuweisen die angegebenen “Klasse" Und "Ausweis”In das hinzugefügte Divelelement. Für das Pop-up zuweisen Sie die Klasse mit dem Namen “Pop-up”Zum Divelelement. Geben Sie dann eine in die angegebene Überschrift an “an

Tag und separate Tasten zum Öffnen und Schließen des Popups. Auch eine anbringen “ONCLICKEreignis zu beiden Tasten, die die angegebenen Funktionen aufrufen:

Dies ist ein zentriertes Pop-up-Div-Element

Popup schließen

Popup zeigen

Danach deklarieren Sie eine Funktion namens “Opendiv ()”Um das zu holen“divElement, indem er seine ID in die “übergibt“dokumentieren.QuerySelector ()Methode und setzen Sie seine Anzeige als "festBlock”Um den Block in einer neuen Zeile zu starten und die Bildschirmbreite aufzunehmen:

Funktion opendiv ()
Lassen Sie Get = Dokument.QuerySelector ('#div')
erhalten.Stil.display = 'block' '

In ähnlicher Weise definieren Sie die “Closediv ()Funktion und wiederholen Sie die obigen Schritte zum Schließen des Popups, indem Sie angebenkeiner”Als den Wert der Anzeigeeigenschaft:

function closeiv ()
Lassen Sie Get = Dokument.QuerySelector ('#div')
erhalten.Stil.display = 'keine' '

Style die zusätzlichen Divs nach Ihren Anforderungen:

Es ist zu sehen, dass wenn das “Popup zeigenDie Schaltfläche "Schaltfläche" wird angeklickt. In der Mitte der Webseite wird ein neues DIV -Element aufgetaucht:

Methode 2: Popup ein DIV -Element im Zentrum der Webseite in JavaScript mit Dokument.GetElementById () -Methode

Der "dokumentieren.GetElementById ()Die Methode erhält ein Element mit der angegebenen ID. Diese Methode kann implementiert werden, um auf die angegebene ID zum Öffnen und Schließen des erstellten Popups zugreifen zu können.

Syntax

dokumentieren.GetElementById (elementId)

In der gegebenen Syntax “,“elementid”Zeigt die ID des jeweiligen Elements an, das abgerufen werden muss.

Beispiel
Fügen Sie zunächst zwei Divs hinzu, wie wir es zuvor getan haben. Geben Sie dann ein Bild ein und geben Sie seinen Pfad zusammen mit seinen Abmessungen an, die im Popup enthalten sind. Danach fügen Sie die folgenden Tasten zusammen mit einem zuONCLICKEreignis, wie in der vorherigen Methode erörtert:

Popup schließen

Popup zeigen

Verwenden Sie nun in den Methoden von Opendiv () und Closeiv () das Dokument.GetElementById () -Methode zum Zugriff auf den erforderlichen Div und setzen Sie den Wert der Anzeigeeigenschaft entsprechend fest:

Funktion opendiv ()
Lassen Sie Get = Dokument.GetElementById ('Div')
erhalten.Stil.display = 'block' '

function closeiv ()
Lassen Sie Get = Dokument.GetElementById ('Div')
erhalten.Stil.display = 'keine' '

Zuletzt, Stil, wie Sie Ihre Webseite gemäß Ihren Anforderungen stylen:

Ausgang

Methode 3: Popup ein Div -Element im Zentrum der Webseite in JavaScript mit JQuery

In dieser speziellen Methode werden wir die erforderliche Aufgabe durch Bewerbung implementieren “JQuery„Zusammen mit seinen Methoden zum Zeigen und Verstecken des geschaffenen Popups.

Das folgende Beispiel zeigt das angegebene Konzept.

Beispiel
Zunächst einschließen die “JQueryBibliothek im Skript -Tag:

Weisen Sie der folgenden Klasse und ID dem "zu" zu "divElement für das Gesamtdokument bzw. das Popup. Fügen Sie dann den folgenden Absatz in das Popup ein. Wiederholen Sie außerdem die diskutierten Methoden, um die Schaltflächen aufzunehmen, die die angegebenen Funktionen beim Auslösen der “aufzeigenONCLICK" Fall:

Die Webseiten oder Websites, die Sie besuchen, lassen Sie den Benutzer häufig warten, um eine wichtige Nachricht oder eine Warnung anzuzeigen, bevor Sie auf die jeweilige Seite zugreifen. Bitten Sie beispielsweise einen Benutzer, die Mitgliedschaft zu kaufen oder sich anzumelden, bevor Sie auf den Inhalt der Website zugreifen. Zusätzlich dazu ein angemessenes Verkehrsmanagement bei Bildungswebsites

Popup zeigen

Erstellen Sie nun eine Funktion namens “Opendiv ()"Das wird auf das DIV zugreifen" mit "Overlay"ID und wenden Sie die" an "zeigen()Methode, um das erstellte Popup anzuzeigen:

Funktion opendiv ()
$ ('#struct').zeigen();

Definieren Sie zum Schließen des Popups die namige Funktion “Closediv ()Und in seiner Funktionsdefinition rufen Sie die “auf" auf "verstecken()Methode auf der aufgerufenen ID zum Schließen des Popups:

function closeiv ()
$ ('#struct').verstecken();

Schließlich stylen Sie Ihr Webseitenelement entsprechend:

Ausgang

Wir haben verschiedene kreative Methoden erörtert, um ein DIV -Element in der Mitte der Webseite in JavaScript aufzunehmen.

Abschluss

Um ein DIV -Element in der Mitte der Webseite in JavaScript zu übertreffen, wenden Sie die “andokumentieren.QuerySelector ()”Methode oder die“dokumentieren.GetElementById ()Methode zum Abrufen des erstellten DIV mithilfe seiner ID, um es aufzusetzen. Darüber hinaus können Sie auch das verwenden “JQueryBibliothek, um ein DIV-Element in Form eines Popups aufzunehmen, indem die integrierten Methoden angewendet werden. Dieser Blog hat die Methoden gezeigt, die angewendet werden können, um ein Div -Element im Zentrum der Webseite in JavaScript zu erzielen.