Tutoriel jQuery pour implémenter l'événement du bouton de fermeture-js tutoriel-php.cn

Tutoriel jQuery pour implémenter l'événement du bouton de fermeture

王林

Libérer： 2024-02-23 18:18:27

original

1183 Les gens l'ont consulté

Tutoriel jQuery pour implémenter lévénement du bouton de fermeture

Dans le développement Web, le bouton de fermeture est une fonction courante. Les utilisateurs cliquent souvent sur le bouton de fermeture pour fermer la fenêtre contextuelle ou la boîte de dialogue de la page Web. Dans jQuery, il est très simple et pratique d'implémenter l'événement du bouton de fermeture. Ce qui suit fournit un exemple de code spécifique pour vous aider à apprendre comment implémenter l'événement du bouton de fermeture.

Tout d'abord, assurez-vous d'avoir introduit le fichier de la bibliothèque jQuery, qui peut être introduit via CDN ou téléchargé localement. Ensuite, nous allons créer un code HTML contenant un bouton de fermeture :

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>关闭按钮事件示例</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="popup">
    <h2>这是一个弹窗</h2>
    <p>这里可以输入弹窗的内容。</p>
    <button class="close-btn">关闭</button>
</div>

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="script.js"></script>
</body>
</html>

Copier après la connexion

Dans le code ci-dessus, nous avons créé une structure qui contient une fenêtre contextuelle et un bouton de fermeture. Ensuite, implémentons l'événement click du bouton de fermeture afin que la fenêtre contextuelle puisse être fermée lorsque vous cliquez sur le bouton de fermeture.

Dans le fichier script.js, nous utilisons jQuery pour sélectionner l'élément du bouton de fermeture et y ajouter un événement de clic Lorsque vous cliquez sur le bouton de fermeture, nous utilisons la méthode hide() de jQuery pour masquer la fenêtre contextuelle :

$(document).ready(function(){
    $('.close-btn').click(function(){
        $('.popup').hide();
    });
});

Copier après la connexion

Le code ci-dessus est très simple. Masquez d'abord la fenêtre contextuelle via la méthode $(document).ready()来确保DOM加载完成后再执行jQuery代码。然后使用$('.close-btn').click()来为关闭按钮添加点击事件，当关闭按钮被点击时，选中类名为.popup的弹窗元素，然后调用hide().

Enfin, vous pouvez styliser la fenêtre contextuelle dans le fichier styles.css, par exemple en définissant la position, la taille, la couleur d'arrière-plan, etc. de la fenêtre contextuelle pour rendre la fenêtre contextuelle plus belle.

Grâce aux exemples de code ci-dessus, vous pouvez apprendre à utiliser jQuery pour implémenter l'événement du bouton de fermeture afin que la fenêtre contextuelle puisse être fermée lorsque vous cliquez sur le bouton de fermeture. J'espère que ce tutoriel pourra vous aider à mieux maîtriser les connaissances de base de jQuery et à améliorer vos compétences en développement Web.

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!