Comment implémenter des fenêtres pop-up dans jquery

Dans la conception Web, la fonction de fenêtre contextuelle est largement utilisée. Elle peut nous aider à afficher des informations rapides aux utilisateurs, à confirmer les opérations d'information, à afficher des effets d'image et d'autres scénarios. Dans jquery, il existe de nombreuses méthodes pour implémenter des fenêtres contextuelles. Ce qui suit présente plusieurs méthodes d'implémentation courantes.

1. Utilisez le composant dialog de jQuery UI

dialog est un composant de la bibliothèque jQuery UI, spécialement utilisé pour créer des fenêtres pop-up. Pour utiliser le composant de dialogue, vous devez d'abord introduire les fichiers CSS et JS de la bibliothèque jQuery UI. Ensuite, vous pouvez créer une fenêtre pop-up de base via le code suivant :

<!-- 引入CSS文件 -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

<!-- 引入JS文件 -->
<script src="http://code.jquery.com/jquery-1.12.4.js"></script>
<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>

<!-- 创建弹窗 -->
<div id="dialog" title="提示信息">
  <p>这里是提示内容</p>
</div>

<script>
  $(function() {
    $("#dialog").dialog();
  });
</script>

Parmi eux, le L'élément div avec l'ID « dialog » est la fenêtre contextuelle. Le cadre extérieur de la fenêtre, l'attribut title est le titre de la fenêtre contextuelle et le contenu de la balise p est les informations principales de la fenêtre contextuelle. fenêtre ouverte. Enfin, en appelant la méthode dialog(), vous pouvez créer une fenêtre pop-up avec un style par défaut.

De plus, vous pouvez personnaliser le style d'affichage et la fonction de la fenêtre contextuelle via les paramètres de configuration de la méthode dialog(). Par exemple, le code suivant implémente la fonction d'affichage des boutons de confirmation et d'annulation dans une fenêtre pop-up, et de déclenchement d'une fonction de rappel après avoir cliqué sur le bouton de confirmation :

<div id="dialog-confirm" title="确认操作">
    <p>确认要执行操作吗？</p>
</div>

<script>
    $(function() {
        $("#dialog-confirm").dialog({
            resizable: false,
            height: "auto",
            width: 400,
            modal: true,
            buttons: {
                "确认": function() {
                    // 这里是确认按钮的回调函数
                    $( this ).dialog( "close" );
                },
                "取消": function() {
                    $( this ).dialog( "close" );
                }
            }
        });
    });
</script>

2. Utilisez le plug-in jQuery Fancybox

<!-- 引入CSS文件 -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.css" />

<!-- 引入JS文件 -->
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.5.7/jquery.fancybox.min.js"></script>

<!-- 创建图片弹窗 -->
<a data-fancybox="gallery" href="image.jpg">
    <img src="image.jpg" alt="图片说明">
</a>

<!-- 创建ajax加载弹窗 -->
<button data-fancybox data-type="ajax" data-src="ajax.html">点击加载弹窗</button>

<script>
    $(function() {
        $("[data-fancybox]").fancybox({
            //这里是配置参数
        });
    });
</script>

Dans le code ci-dessus, la première balise a est un exemple de fenêtre contextuelle d'image unique. L'attribut data-fancybox indique le groupe d'images à afficher et l'attribut href est le. Adresse du fichier image à afficher dans la fenêtre contextuelle. La deuxième balise bouton est un exemple de fenêtre contextuelle de chargement ajax, dans laquelle les attributs data-fancybox et data-type représentent respectivement le type de fenêtre contextuelle et la méthode de chargement.

3. Utilisez du CSS pur pour implémenter des fenêtres contextuelles

En plus d'utiliser des plug-ins JS, nous pouvons également obtenir de simples effets de fenêtres contextuelles grâce au CSS pur. Ce qui suit est un exemple de base de fenêtre contextuelle CSS pure :

<button class="modal-toggle">点击弹出弹窗</button>

<div class="modal">
    <div class="modal-content">
        <h3>弹窗标题</h3>
        <p>这里是弹窗内容</p>
        <button class="modal-close">关闭窗口</button>
    </div>
</div>

<style>
    .modal {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background-color: rgba(0, 0, 0, 0.5);
        display: none;
        justify-content: center;
        align-items: center;
    }

    .modal-content {
        max-width: 80%;
        background-color: white;
        padding: 20px;
        border-radius: 5px;
        text-align: center;
    }

    .modal-toggle {
        display: block;
        margin: 50px auto;
        width: 200px;
        height: 50px;
        color: white;
        font-size: 20px;
        background-color: #1ABC9C;
        border: none;
        border-radius: 5px;
        outline: none;
        cursor: pointer;
    }
</style>

<script>
    $(function() {
        $(".modal-toggle").click(function() {
            $(".modal").fadeIn();
        });

        $(".modal-close").click(function() {
            $(".modal").fadeOut();
        });
    });
</script>

Dans l'exemple de code, le positionnement fixe et le contrôle des attributs d'affichage de CSS3 sont utilisés pour obtenir l'effet de base de la fenêtre contextuelle. Parallèlement, les méthodes fadeIn() et fadeOut() de jQuery sont également utilisées pour déclencher l'apparition et la fermeture de fenêtres pop-up. Bien entendu, les développeurs peuvent ajuster de manière flexible le style et la fonction des fenêtres contextuelles en fonction des besoins réels.

Pour résumer, voici plusieurs façons d'implémenter des fenêtres pop-up dans jquery. Différentes méthodes ont différents scénarios applicables. Les développeurs peuvent choisir la méthode la plus appropriée en fonction des besoins réels pour obtenir d'excellents effets contextuels.

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!