javascript 选项 yes no popup - Javascript (1)

📌 相关文章

📜 javascript 选项 yes no popup - Javascript (1)

📅 最后修改于: 2023-12-03 15:16:16.198000 🧑 作者: Mango

JavaScript选项弹窗

JavaScript选项弹窗是一种常用的Web开发技术，用于在用户点击某个按钮等操作时，弹出一个包含“是”、“否”等选项的弹窗，以获取用户的确认或选择。本文将介绍如何在JavaScript中实现选项弹窗，并提供示例代码。

实现步骤

实现JavaScript选项弹窗一般需要以下步骤：

创建一个包含选项的HTML结构，例如：

<div id="confirmBox">
  <p>您确认要执行此操作吗？</p>
  <button id="confirmYes">是</button>
  <button id="confirmNo">否</button>
</div>

为“是”、“否”按钮添加点击事件处理函数，并在函数中执行相关操作，例如：

document.getElementById('confirmYes').addEventListener('click', function() {
  // 用户点击“是”按钮时执行的操作
});

document.getElementById('confirmNo').addEventListener('click', function() {
  // 用户点击“否”按钮时执行的操作
});

在需要弹出选项弹窗的地方，使用JavaScript修改HTML结构，例如：

var confirmBox = document.getElementById('confirmBox');
confirmBox.style.display = 'block';

在需要隐藏选项弹窗的地方，使用JavaScript修改HTML结构，例如：

var confirmBox = document.getElementById('confirmBox');
confirmBox.style.display = 'none';

示例代码

以下是一个简单的JavaScript选项弹窗示例代码：

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>JavaScript选项弹窗</title>
</head>
<body>

<button id="openConfirmBox">点击这里弹出选项弹窗</button>

<div id="confirmBox" style="display:none">
  <p>您确认要执行此操作吗？</p>
  <button id="confirmYes">是</button>
  <button id="confirmNo">否</button>
</div>

<script>
  document.getElementById('openConfirmBox').addEventListener('click', function() {
    var confirmBox = document.getElementById('confirmBox');
    confirmBox.style.display = 'block';
  });

  document.getElementById('confirmYes').addEventListener('click', function() {
    alert('您点击了“是”按钮！');
    var confirmBox = document.getElementById('confirmBox');
    confirmBox.style.display = 'none';
  });

  document.getElementById('confirmNo').addEventListener('click', function() {
    alert('您点击了“否”按钮！');
    var confirmBox = document.getElementById('confirmBox');
    confirmBox.style.display = 'none';
  });
</script>

</body>
</html>

该示例代码中，当用户点击“点击这里弹出选项弹窗”按钮时，将弹出一个包含“是”、“否”选项的弹窗。当用户点击“是”或“否”按钮时，将弹出一个提示框，并隐藏选项弹窗。