js弹框确定取消怎么弄

要实现JavaScript弹框的确定和取消功能，可以使用confirm()、alert()、prompt()等方法、使用第三方库如SweetAlert、结合HTML和CSS自定义弹框。 其中，confirm()方法是最常用的，它会弹出一个确认对话框，用户可以选择“确定”或“取消”。下面详细解释如何使用这些方法：

一、使用JavaScript内置方法

1、`confirm()` 方法

confirm() 方法是一个简单的方式来创建一个包含“确定”和“取消”按钮的对话框。其语法非常简单：

if (confirm("你确定要执行这个操作吗？")) {
    // 用户点击了“确定”
    console.log("用户点击了确定");
} else {
    // 用户点击了“取消”
    console.log("用户点击了取消");
}

在这种情况下，confirm() 方法将返回一个布尔值，表示用户是否点击了“确定”。

2、`alert()` 方法

虽然 alert() 只能显示一个消息并包含一个“确定”按钮，但它在一些情况下也很有用。例如：

alert("这是一个警告信息！");

3、`prompt()` 方法

prompt() 方法允许你提示用户输入一些信息，并返回用户输入的内容：

var userInput = prompt("请输入你的名字：", "默认值");
if (userInput !== null) {
    console.log("用户输入了：" + userInput);
} else {
    console.log("用户取消了输入");
}

二、使用第三方库

1、SweetAlert

SweetAlert 是一个流行的库，可以用来创建美观和功能强大的弹框。你可以在项目中引入 SweetAlert，然后使用它来创建自定义弹框。

首先，引入 SweetAlert 的 CSS 和 JavaScript 文件：

<link rel="stylesheet" href="https://unpkg.com/sweetalert/dist/sweetalert.css">
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>

然后，你可以使用如下代码来创建一个确认对话框：

swal({
  title: "你确定要执行这个操作吗？",
  text: "一旦执行，你将无法撤销这个操作！",
  icon: "warning",
  buttons: true,
  dangerMode: true,
})
.then((willDelete) => {
  if (willDelete) {
    swal("操作已执行！", {
      icon: "success",
    });
  } else {
    swal("操作已取消！");
  }
});

2、结合HTML和CSS自定义弹框

有时候，你可能需要更高级的自定义弹框。你可以使用 HTML、CSS 和 JavaScript 来创建完全定制化的弹框。

首先，创建一个简单的 HTML 结构：

<div id="myModal" class="modal">
  <div class="modal-content">
    <span class="close">&times;</span>
    <p>你确定要执行这个操作吗？</p>
    <button id="confirmBtn">确定</button>
    <button id="cancelBtn">取消</button>
  </div>
</div>

然后，使用 CSS 来样式化弹框：

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgb(0,0,0);
  background-color: rgba(0,0,0,0.4);
}
.modal-content {
  background-color: #fefefe;
  margin: 15% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}
.close {
  color: #aaa;
  float: right;
  font-size: 28px;
  font-weight: bold;
}
.close:hover,
.close:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

最后，使用 JavaScript 来控制弹框的显示和隐藏：

var modal = document.getElementById("myModal");
var btnConfirm = document.getElementById("confirmBtn");
var btnCancel = document.getElementById("cancelBtn");
var span = document.getElementsByClassName("close")[0];
document.querySelector("button").onclick = function() {
  modal.style.display = "block";
}
span.onclick = function() {
  modal.style.display = "none";
}
btnConfirm.onclick = function() {
  console.log("用户点击了确定");
  modal.style.display = "none";
}
btnCancel.onclick = function() {
  console.log("用户点击了取消");
  modal.style.display = "none";
}
window.onclick = function(event) {
  if (event.target == modal) {
    modal.style.display = "none";
  }
}

三、总结

通过本文的介绍，我们了解了如何使用 JavaScript 内置方法和第三方库来创建弹框的确定和取消功能。无论是使用简单的 confirm() 方法，还是使用 SweetAlert 这样的第三方库，甚至是自定义 HTML 和 CSS 弹框，都可以实现这一功能。根据具体的需求和项目的实际情况，选择合适的方法来实现弹框功能。

js弹框确定取消怎么弄

一、使用JavaScript内置方法

1、confirm() 方法

2、alert() 方法

3、prompt() 方法