Stellen Sie das Popup-Fenster so ein, dass es in JQuery zentriert ist

Mit der kontinuierlichen Weiterentwicklung und Popularisierung der Internet-Technologie legt die Website-Entwicklung immer mehr Wert auf die Benutzererfahrung. Unter anderem werden Popup-Fenster als gängiges Benutzeraufforderungstool bei der Website-Entwicklung immer häufiger verwendet. In der tatsächlichen Entwicklung ist jedoch auch die Zentrierung des Popup-Fensters ein wichtiger Punkt, den unsere Entwickler berücksichtigen müssen. In diesem Artikel wird jquery verwendet, um die Popup-Fenster-Zentrierungsmethode zu implementieren, damit Entwickler sie flexibel in der tatsächlichen Arbeit anwenden können.

In jquery gibt es viele Möglichkeiten, das Popup-Fenster zu zentrieren. Im Folgenden werden zwei häufig verwendete Methoden vorgestellt.

Methode 1: CSS-Methode

Mit der CSS-Methode von jquery kann der Stil von Elementen einfach festgelegt werden. Indem Sie das Positionsattribut des Elements auf „absolut“ setzen und dann die Position des Elements über die Attribute „oben“ und „links“ festlegen, können Sie den Zentrierungseffekt erzielen. Der Code lautet wie folgt:

$(function(){
    //获取弹窗窗口对象
    var pop = $("#popup");
    //获取窗口的宽高
    var popWidth = pop.width();
    var popHeight = pop.height();
    //计算窗口的位置
    var left = ($(window).width() - popWidth) / 2;
    var top = ($(window).height() - popHeight) / 2;
    //设置弹窗窗口的位置
    pop.css({
        "position": "absolute",
        "left": left,
        "top": top
    });
});

Im obigen Code erhalten wir zuerst das Popup-Fensterobjekt, dann die Breite und Höhe des Fensters und berechnen die Position des Fensters. Legen Sie dann die Position des Popup-Fensters fest, indem Sie die CSS-Stilmethode festlegen.

Methode 2: JQuery-Plug-In-Methode

Zusätzlich zur CSS-Methode verfügt JQuery auch über einige leistungsstarke Plug-Ins, die uns dabei helfen können, das Popup-Fenster besser zu zentrieren leicht. Im Folgenden finden Sie eine kurze Einführung in zwei praktische Plug-Ins.

1. jqueryui

jqueryui ist ein Erweiterungs-Plug-in für jquery, das einen umfangreichen Satz an UI-Komponenten und -Effekten bereitstellt. Unter anderem wird die Dialogkomponente von jqueryui häufig zum Anzeigen und Steuern von Popup-Fenstern verwendet. Wir müssen nur das Positionsattribut des Dialogfensters auf „Mitte“ setzen, um den Zentrierungseffekt zu erzielen. Der Code lautet wie folgt:

$(function(){
    //创建dialog对象
    $("#popup").dialog({
        position: {my: "center", at: "center", of: window}
    });
});

Im obigen Code erstellen wir ein Dialogobjekt und legen dann den Wert fest des Positionsattributs auf Das Objekt ist zentriert. Unter diesen sind die Attributwerte „my“ und „at“ auf „center“ gesetzt, was die Ausrichtung des Objekts selbst und des Zielobjekts angibt (d. h. window). Der Attributwert „of“ ist auf „window“ gesetzt, was angibt, dass das Ziel ist Objekt ist ein Browserfenster.

2. Center-Plugin

Center-Plugin ist ein JQuery-Plugin, das zum Zentrieren jedes Elements verwendet werden kann. Wir müssen nur das Plug-In in den Code einführen und die entsprechende Methode aufrufen, um den Zentrierungseffekt des Popup-Fensters zu erzielen. Der Code lautet wie folgt:

$(function(){
    //获取元素对象
    var pop = $("#popup");
    //使用center插件居中
    pop.center();
});

Im obigen Code haben wir Rufen Sie zuerst das Elementobjekt ab und rufen Sie dann das Center-Plug-In auf. Die Methode center() kann den Zentrierungseffekt des Elements erzielen. Es ist zu beachten, dass dieses Plug-In eine Vereinfachung der Funktion jquery-ui.dialog darstellt. Sie müssen daher sicherstellen, dass die relevanten Dateien von jquery-ui während der Verwendung eingeführt wurden.

Zusammenfassung

In diesem Artikel haben wir zwei Methoden zum Zentrieren des JQuery-Popup-Fensters vorgestellt: CSS und JQuery-Plug-In. Durch Festlegen des CSS-Stils des Elements oder Aufrufen des entsprechenden JQuery-Plug-Ins können wir problemlos den Zentrierungseffekt des Popup-Fensters erzielen und so den Benutzern ein besseres Surferlebnis bieten. Ob im Bereich Webentwicklung oder mobile Anwendungen, wir können entsprechend der tatsächlichen Situation eine geeignete Methode auswählen, um das Popup-Fenster schöner und benutzerfreundlicher zu gestalten.

Das obige ist der detaillierte Inhalt vonStellen Sie das Popup-Fenster so ein, dass es in JQuery zentriert ist. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!