Avec la popularité d'Internet, de plus en plus de sites Web commencent à utiliser jQuery pour le développement. Dans jQuery, la boîte de dialogue est une fonction très pratique. Cet article explique comment utiliser jQuery pour créer une boîte de dialogue indiquant si.
1. Présentation
Sur de nombreux sites Web, nous voyons souvent une telle boîte de dialogue : lorsque nous cliquons sur un bouton ou un lien, une boîte de dialogue apparaît pour nous demander si nous sommes sûrs d'effectuer l'opération. Une telle boîte de dialogue contient généralement deux boutons : « OK » et « Annuler », et l'utilisateur peut choisir de poursuivre ou non l'opération.
Dans jQuery, vous pouvez facilement implémenter ce type de boîte de dialogue avec if. Vous devez d'abord utiliser la bibliothèque jQuery UI, puis utiliser le contrôle de dialogue qu'elle contient pour créer une boîte de dialogue.
2. Créer une boîte de dialogue
Ce qui suit est une simple page HTML, qui contient un bouton et une boîte de dialogue :
<!DOCTYPE html> <html> <head> <title>jQuery 带是否的提示框</title> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script> </head> <body> <button id="btn">删除</button> <div id="dialog-confirm" title="提示"> <p>确定要删除吗？</p> </div> </body> </html>
Comme vous pouvez le voir, nous avons introduit les bibliothèques jQuery et jQuery UI dans la page et créé un bouton et une boîte de dialogue. Le contenu de la boîte de dialogue ne comporte qu'un seul texte d'invite et son titre est « Invite ».
Ensuite, nous devons utiliser le contrôle de dialogue de jQuery pour afficher la boîte de dialogue. La méthode spécifique est la suivante :
$(document).ready(function() {
$("#dialog-confirm").dialog({
autoOpen: false,
modal: true,
buttons: {
"确定": function() {
// 执行删除操作
// ...
$(this).dialog("close");
},
"取消": function() {
$(this).dialog("close");
}
}
});
$("#btn").click(function() {
$("#dialog-confirm").dialog("open");
});
});Dans ce code, nous appelons d'abord la méthode dialog() pour créer une boîte de dialogue et la configurer. Parmi eux, autoOpen : false signifie que la boîte de dialogue est fermée lors de l'initialisation, modal : true signifie que la boîte de dialogue est une boîte modale (c'est-à-dire qu'une fois la boîte de dialogue affichée, l'arrière-plan deviendra gris et ne pourra plus être utilisé), et l'option boutons est utilisée pour définir le bouton de la boîte de dialogue dans la boîte. Dans cet exemple, nous définissons deux boutons, OK et Annuler, et spécifions les actions à effectuer lorsque l'utilisateur clique sur ces boutons.
À la fin du code, nous lions un événement de clic au bouton. Lorsque l'utilisateur clique sur le bouton, une boîte de dialogue apparaît.
3. Code complet
Ce qui suit est le code HTML et JavaScript complet pour votre référence :
<!DOCTYPE html>
<html>
<head>
<title>jQuery 带是否的提示框</title>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script>
<script>
$(document).ready(function() {
$("#dialog-confirm").dialog({
autoOpen: false,
modal: true,
buttons: {
"确定": function() {
// 执行删除操作
// ...
$(this).dialog("close");
},
"取消": function() {
$(this).dialog("close");
}
}
});
$("#btn").click(function() {
$("#dialog-confirm").dialog("open");
});
});
</script>
</head>
<body>
<button id="btn">删除</button>
<div id="dialog-confirm" title="提示">
<p>确定要删除吗？</p>
</div>
</body>
</html>Ce qui précède est tout le contenu de l'utilisation de jQuery pour créer une boîte de dialogue avec un oui ou un non. J'espère que cet article pourra être utile aux lecteurs.
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!
Solution au problème selon lequel les fichiers exe ne peuvent pas être ouverts dans le système win10
Que signifie serveur Web ?
Qu'est-ce que l'interface AGP
Quelle interface est audio ?
Quelles sont les instructions de mise à jour MySQL ?
Comment publier du texte dans WeChat Moments
Comment actualiser le bios
Prix d'échange OuYi en USD
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
