如何创建jQuery提示框？含Yes/No按钮及点击值存储方法

嘿，这两个jQuery提示框的问题我熟得很，给你一步步讲清楚！

1. 如何创建一个jQuery提示框 #

首先得说明：jQuery核心库本身并没有自带专门的提示框组件，但我们最常用的方案是借助jQuery UI的Dialog组件来实现（当然也可以结合原生JS的alert()，但后者不算纯jQuery的实现）。下面是具体步骤：

• 第一步：先引入依赖文件（jQuery和jQuery UI的JS、CSS）

<!-- 引入jQuery核心库 -->
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<!-- 引入jQuery UI的JS和默认样式 -->
<script src="https://code.jquery.com/ui/1.13.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.13.1/themes/base/jquery-ui.css">

• 第二步：实现提示框（两种方式可选）
  方式一：提前写好HTML结构，再用jQuery初始化

  <!-- 先准备一个隐藏的提示框内容 -->
  <div id="basicDialog" title="提示">这是一个基础的jQuery提示框！</div>
  
  <script>
  $(document).ready(function() {
    // 初始化Dialog，设置为模态（背景不可点击），添加确定按钮
    $("#basicDialog").dialog({
      modal: true,
      buttons: {
        "确定": function() {
          $(this).dialog("close"); // 点击后关闭提示框
        }
      }
    });
  });
  </script>
  

  方式二：完全通过JS动态创建，无需提前写HTML

  $(document).ready(function() {
    // 直接创建提示框元素并初始化Dialog
    $("<div title='动态提示'>这是用JS动态生成的jQuery提示框！</div>").dialog({
      modal: true,
      buttons: {
        确定: function() {
          $(this).dialog("destroy"); // 关闭同时销毁元素，避免冗余
        }
      }
    });
  });
  

2. 创建带有Yes/No按钮的jQuery提示框并存储用户选择值 #

同样用jQuery UI的Dialog组件，这次我们设置两个按钮，并定义一个变量来存储用户的选择结果，具体代码如下：

$(document).ready(function() {
  // 定义变量用来存储用户的选择
  let userSelection;

  // 创建带确认按钮的提示框
  $("<div title='确认操作'>你确定要执行这个操作吗？</div>").dialog({
    modal: true,
    buttons: {
      "Yes": function() {
        userSelection = "yes"; // 存储选择值
        $(this).dialog("destroy");
        // 这里可以添加选择Yes后的业务逻辑
        console.log("用户选了Yes，已存储值：", userSelection);
      },
      "No": function() {
        userSelection = "no"; // 存储选择值
        $(this).dialog("destroy");
        // 选择No后的逻辑
        console.log("用户选了No，已存储值：", userSelection);
      }
    },
    // 处理用户直接关闭提示框的情况（比如点击右上角叉号）
    close: function() {
      if (typeof userSelection === 'undefined') {
        userSelection = "cancel"; // 设置默认值
        console.log("用户关闭了提示框，默认存储值：", userSelection);
      }
    }
  });

  // 后续在任何需要的地方都可以使用userSelection变量
  // 举个例子：
  // function doSomething() {
  //   if (userSelection === "yes") {
  //     // 执行Yes对应的操作
  //   }
  // }
});

如果不想依赖jQuery UI，也可以自己用jQuery+CSS手写自定义提示框，但需要处理样式、事件绑定等细节，不如直接用成熟的UI组件高效~

内容的提问来源于stack exchange，提问作者Santhi