JavaScript 提示 Yes/No

在开发 Web 应用程序时，我们通常需要在用户执行某些操作之前询问他们是否确定这样做。这就需要一个 JavaScript 提示框，让用户选择“是”或“否”，以便我们可以相应地采取行动。

使用 confirm() 方法

JavaScript 提供了一个名为 confirm() 的方法，用于显示一个确认提示框，并等待用户的响应。该方法接受一个字符串作为参数，该字符串将作为提示文本显示在提示框上方。

if (confirm("Are you sure?")) {
  // 用户选择了“是”
} else {
  // 用户选择了“否”
}

上面的代码会显示一个提示框，询问用户是否确定。如果用户选择“是”，则代码块中的代码将被执行；否则，将会执行 else 代码块中的内容。

自定义提示文本

默认情况下，confirm() 方法将显示一个带有“确定”和“取消”按钮的提示框。但是，我们可以通过返回值将按钮文本更改为我们所需的内容。

var result = confirm("Do you want to save your changes?", "Yes", "No");
if (result) {
  // 用户选择了“是”
} else {
  // 用户选择了“否”
}

注意，返回值 result 将是一个布尔值：如果用户选择了“是”，则为 true；如果选择了“否”，则为 false。

更好的用户体验

提示框是一种简单的方法来询问用户是否确定，但是如果您需要为您的应用程序提供更好的用户体验，则可能需要使用自定义模态框。这些模态框允许您更好地控制外观和行为，并允许您在不刷新页面的情况下执行操作。一种流行的自定义模态框库是 Bootstrap。

<!-- 引入 Bootstrap 的 CSS 和 jQuery -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

<!-- 引入 Bootstrap 的 JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>

<!-- 显示自定义模态框 -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Open modal</button>

<!-- 模态框 HTML 代码 -->
<div class="modal" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <h4 class="modal-title" id="myModalLabel">Are you sure?</h4>
      </div>
      <div class="modal-body">
        <p>Do you want to save your changes?</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">No</button>
        <button type="button" class="btn btn-primary">Yes</button>
      </div>
    </div>
  </div>
</div>

这将显示一个可以自定义文本和按钮文本的模态框。当用户单击“是”按钮时，您可以执行所需的操作，而无需刷新页面。

总结

JavaScript 提供了多种方法来提示用户选择“是”或“否”。默认情况下，可以使用 confirm() 方法，但是如果您需要更好的控制和体验，可以创建自定义模态框。无论您使用哪种方法，都应该确保在用户执行重要操作之前始终询问他们是否确定，以防止用户犯下错误。