Exemple pour expliquer comment utiliser jquery pour créer une boîte de dialogue indiquant si-Questions et réponses frontales-php.cn

Exemple pour expliquer comment utiliser jquery pour créer une boîte de dialogue indiquant si

PHPz

Libérer： 2023-04-07 13:53:51

original

661 Les gens l'ont consulté

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>

Copier après la connexion

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");
  });
});

Copier après la connexion

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>

Copier après la connexion

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!