温馨提示×

javascript - alert如何取消“确定”按钮和右上角“×”

小云
270
2023-09-27 10:12:38
栏目: 编程语言

在JavaScript中,alert弹窗的确定按钮和右上角的“×”按钮是无法取消的。这是因为alert是浏览器提供的原生弹窗,其行为不可更改。

如果你需要自定义弹窗,并且希望取消确定按钮和右上角的“×”按钮,你可以考虑使用其他弹窗插件或者自己实现一个自定义弹窗。

以下是一个使用SweetAlert2插件的例子,其中可以自定义弹窗的按钮和关闭行为:

首先,你需要在HTML页面中引入SweetAlert2的CSS和JS文件:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@10.15.5/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10.15.5/dist/sweetalert2.min.js"></script>

然后,你可以使用SweetAlert2的弹窗函数来创建自定义的弹窗:

Swal.fire({
title: 'Custom Alert',
text: 'This is a custom alert!',
showCancelButton: false,
showCloseButton: false,
confirmButtonText: 'OK',
allowOutsideClick: false
}).then((result) => {
// 弹窗关闭后的回调函数
if (result.isConfirmed) {
// 用户点击了确认按钮
console.log('OK button clicked');
} else {
// 用户点击了取消按钮或者点击了弹窗外部
console.log('Cancel button clicked');
}
});

在上面的例子中,showCancelButton和showCloseButton选项都被设置为false,这样就取消了弹窗的取消按钮和关闭按钮。confirmButtonText选项可以用来自定义确定按钮的文本。allowOutsideClick选项可以用来阻止用户点击弹窗外部关闭弹窗。

通过使用SweetAlert2或其他类似的弹窗插件,你可以更灵活地控制弹窗的行为,包括取消确定按钮和右上角的“×”按钮。

0