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

小云
645
2023-09-27 10:12:38
欄目: 編程語言

在JavaScript中,alert彈窗的確定按鈕和右上角的“×”按鈕是無法取消的。這是因?yàn)閍lert是瀏覽器提供的原生彈窗,其行為不可更改。

如果你需要自定義彈窗,并且希望取消確定按鈕和右上角的“×”按鈕,你可以考慮使用其他彈窗插件或者自己實(shí)現(xiàn)一個(gè)自定義彈窗。

以下是一個(gè)使用SweetAlert2插件的例子,其中可以自定義彈窗的按鈕和關(guān)閉行為:

首先,你需要在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的彈窗函數(shù)來創(chuàng)建自定義的彈窗:

Swal.fire({
title: 'Custom Alert',
text: 'This is a custom alert!',
showCancelButton: false,
showCloseButton: false,
confirmButtonText: 'OK',
allowOutsideClick: false
}).then((result) => {
// 彈窗關(guān)閉后的回調(diào)函數(shù)
if (result.isConfirmed) {
// 用戶點(diǎn)擊了確認(rèn)按鈕
console.log('OK button clicked');
} else {
// 用戶點(diǎn)擊了取消按鈕或者點(diǎn)擊了彈窗外部
console.log('Cancel button clicked');
}
});

在上面的例子中,showCancelButton和showCloseButton選項(xiàng)都被設(shè)置為false,這樣就取消了彈窗的取消按鈕和關(guān)閉按鈕。confirmButtonText選項(xiàng)可以用來自定義確定按鈕的文本。allowOutsideClick選項(xiàng)可以用來阻止用戶點(diǎn)擊彈窗外部關(guān)閉彈窗。

通過使用SweetAlert2或其他類似的彈窗插件,你可以更靈活地控制彈窗的行為,包括取消確定按鈕和右上角的“×”按鈕。

0