La boîte contextuelle jquery disparaît en quelques secondes-Questions et réponses frontales-php.cn

La boîte contextuelle jquery disparaît en quelques secondes

王林

Libérer： 2023-05-08 18:35:38

original

1095 Les gens l'ont consulté

Dans la conception et le développement de sites Web, les boîtes contextuelles sont généralement utilisées pour demander ou confirmer certaines informations. Cependant, lorsque la boîte contextuelle reste trop longtemps, cela affectera l'expérience utilisateur et produira même des opérations utilisateur non valides. Par conséquent, comment faire disparaître la boîte contextuelle en quelques secondes est une question très importante. jQuery fournit une solution simple. Cet article explique comment utiliser jQuery pour obtenir une boîte contextuelle qui disparaît en quelques secondes.

1. Créez une boîte pop-up

Avant de commencer, vous devez créer une boîte pop-up de base. Vous pouvez utiliser CSS et HTML pour créer une simple boîte contextuelle, comme indiqué ci-dessous :

<style>
    .popup{
        font-size: 16px;
        position: fixed;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        z-index: 9999;
        background-color: #ffffff;
        border: 1px solid #dddddd;
        padding: 20px;
    }
</style>
<div class="popup">
    这是一个弹出框
</div>

Copier après la connexion

Ici, un div avec le nom de classe popup est créé, dans lequel le style de base de la boîte contextuelle est défini. Le style peut être ajusté en fonction des besoins spécifiques des projets réels.

2. Utilisez jQuery pour contrôler l'affichage et le masquage des boîtes contextuelles

jQuery fournit une méthode simple pour contrôler l'affichage et le masquage des boîtes contextuelles. Vous pouvez utiliser le code suivant pour y parvenir :

// 显示弹出框
$(".popup").show();

// 隐藏弹出框
$(".popup").hide();

Copier après la connexion

Ici, le sélecteur jQuery est utilisé pour sélectionner l'élément avec la fenêtre contextuelle du nom de classe, et les méthodes show() et hide() sont utilisées pour afficher et masquer la boîte contextuelle. Cependant, cette méthode ne peut pas atteindre l’objectif de disparition automatique de la boîte contextuelle.

3. Utilisez la fonction de retard pour contrôler le temps de disparition de la boîte contextuelle

Afin de faire disparaître la boîte contextuelle en quelques secondes, vous pouvez utiliser les méthodes delay() et fadeOut() de jQuery. Vous pouvez utiliser le code suivant pour y parvenir :

// 延迟3秒后隐藏弹出框
$(".popup").delay(3000).fadeOut();

Copier après la connexion

Ici, la méthode delay() est utilisée pour retarder le temps de disparition de la pop-up de 3 secondes, puis la méthode fadeOut() est utilisée pour faire apparaître la pop-up. -up box disparaît progressivement en 3 secondes. Cela a pour effet de faire disparaître la boîte contextuelle en quelques secondes.

4. Implémentation complète du code

Maintenant, nous avons présenté comment utiliser jQuery pour obtenir l'effet de disparition de la boîte contextuelle en quelques secondes. Voici l'implémentation complète du code :

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>jQuery弹出框几秒消失</title>
    <style>
        .popup{
            font-size: 16px;
            position: fixed;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
            z-index: 9999;
            background-color: #ffffff;
            border: 1px solid #dddddd;
            padding: 20px;
        }
    </style>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
    <script>
        $(function(){
            // 显示弹出框
            $(".popup").show();
            // 延迟3秒后隐藏弹出框
            $(".popup").delay(3000).fadeOut();
        });
    </script>
</head>
<body>
    <div class="popup">
        这是一个弹出框
    </div>
</body>
</html>

Copier après la connexion

Ici, utilisez le sélecteur jQuery pour sélectionner l'élément avec la fenêtre contextuelle du nom de classe, puis affichez la boîte contextuelle une fois la page chargée, puis utilisez les méthodes delay() et fadeOut() pour implémenter la boîte contextuelle pendant 3 secondes. L'effet disparaît plus tard.

Résumé

Cet article explique comment utiliser jQuery pour obtenir l'effet de disparition de la boîte contextuelle en quelques secondes. Tout d'abord, vous devez créer une boîte contextuelle de base, puis utiliser le sélecteur et show() de jQuery. , hide(), delay() , fadeOut() et d'autres fonctions pour contrôler l'affichage et le masquage de la boîte contextuelle, et enfin obtenir l'effet de disparition de la boîte contextuelle en quelques secondes. J'espère que cet article sera utile aux débutants.

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!