Définir la fenêtre pop-up pour qu'elle soit centrée dans jquery

Avec le développement et la vulgarisation continus de la technologie Internet, le développement de sites Web accorde de plus en plus d'attention à l'expérience utilisateur. Parmi elles, les fenêtres pop-up, en tant qu'outil d'invite utilisateur courant, sont de plus en plus fréquemment utilisées dans le développement de sites Web. Cependant, dans le développement réel, la manière de centrer la fenêtre contextuelle est également une question importante que nos développeurs doivent prendre en compte. Cet article utilisera jquery pour implémenter la méthode de centrage des fenêtres contextuelles afin que les développeurs puissent l'appliquer de manière flexible dans leur travail réel.

Dans jquery, il existe de nombreuses façons de centrer la fenêtre pop-up. Deux méthodes couramment utilisées sont présentées ci-dessous.

Méthode 1 : méthode CSS

Utilisez la méthode CSS de jquery pour styliser facilement les éléments. En définissant l'attribut position de l'élément sur absolu, puis en définissant la position de l'élément via les attributs haut et gauche, vous pouvez obtenir l'effet de centrage. Le code est le suivant :

$(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
    });
});

Dans le code ci-dessus, nous obtenons d'abord l'objet fenêtre contextuelle, puis obtenons la largeur et la hauteur de la fenêtre, et calculons la position de la fenêtre. Ensuite, définissez la position de la fenêtre contextuelle en définissant la méthode de style CSS.

Méthode 2 : méthode du plug-in jquery

En plus de la méthode css, jquery dispose également de plug-ins puissants qui peuvent nous aider à centrer la fenêtre contextuelle plus facilement. Ce qui suit est une brève introduction à deux plug-ins pratiques.

1. jqueryui

jqueryui est un plug-in d'extension pour jquery, qui fournit un riche ensemble de composants et d'effets d'interface utilisateur. Parmi eux, le composant de dialogue de jqueryui est souvent utilisé pour afficher et contrôler les fenêtres contextuelles. Il suffit de définir l'attribut position de la fenêtre de dialogue sur center pour obtenir l'effet de centrage. Le code est le suivant :

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

Dans le code ci-dessus, nous créons un objet de dialogue puis centrons l'objet en définissant la valeur du. attribut de position. Parmi eux, les valeurs d'attribut my et at sont définies sur "center", qui indiquent respectivement l'alignement de l'objet lui-même et de l'objet cible (c'est-à-dire window). La valeur de l'attribut of est définie sur window, ce qui indique que la cible). l'objet est une fenêtre de navigateur.

2. center plugin

center plugin est un plugin jquery qui peut être utilisé pour centrer n'importe quel élément. Il suffit d'introduire le plug-in dans le code et d'appeler la méthode correspondante pour obtenir l'effet de centrage de la fenêtre pop-up. Le code est le suivant :

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

Dans le code ci-dessus, nous obtenons d'abord l'objet élément, puis. appelez la méthode center() du plug-in center, vous pouvez obtenir l'effet de centrage de l'élément. Il convient de noter que ce plug-in est une simplification de la fonction jquery-ui.dialog, vous devez donc vous assurer que les fichiers pertinents de jquery-ui ont été introduits lors de l'utilisation.

Résumé

Dans cet article, nous avons présenté deux méthodes pour réaliser le centrage des fenêtres pop-up jquery : css et plug-in jquery. En définissant le style CSS de l'élément ou en appelant le plug-in jquery correspondant, nous pouvons facilement obtenir l'effet de centrage de la fenêtre contextuelle, offrant ainsi aux utilisateurs une meilleure expérience de navigation. Que ce soit dans le domaine du développement web ou des applications mobiles, nous pouvons choisir une méthode adaptée en fonction de la situation réelle pour rendre la fenêtre pop-up plus belle et plus facile à utiliser.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!