Maison > Article > interface Web > La boîte contextuelle jquery disparaît en quelques secondes

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

王林original: 2023-05-08 18:35:381012parcourir

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>

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

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

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>

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!

jquery css html 选择器

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：jquery passe à la couche de contrôleArticle suivant：jquery passe à la couche de contrôle

Articles Liés

Voir plus