請問如何自定義alert UI,或是有外掛能支持阻斷程序運行效果 (能兼容IE11)
目前用過幾個套件,有無法兼容IE11,有的無法實現alert時阻斷程序運行,按確認後,其他JS才能繼續運行效果
如,用alert用戶可以看到提示字,知道自己完成送出
alert('資料確認完成');
windows.reload()
用其他套件會一閃而過,直接reload
在兼容IE11並提供自定義外觀的情況下,你可以考慮使用 SweetAlert2 套件。SweetAlert2 是一個彈出視窗的 JavaScript 庫,它提供了許多自定義選項和外觀樣式,並且支援IE11。
以下是使用 SweetAlert2 套件來自定義彈出視窗的示例:
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.css">
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@11.0.19/dist/sweetalert2.min.js"></script>
fire
函數來彈出視窗:Swal.fire({
title: '資料確認完成',
icon: 'success',
timer: 2000, // 彈出視窗自動關閉的時間(以毫秒為單位)
showConfirmButton: false // 隱藏確認按鈕
}).then(() => {
window.location.reload(); // 在視窗關閉後重新載入頁面
});
這段代碼將彈出一個成功提示的彈出視窗,顯示標題為「資料確認完成」,並在2秒後自動關閉。在視窗關閉後,使用 then
方法來執行重新載入頁面的操作。
SweetAlert2 還提供了許多其他的自定義選項,如樣式、按鈕和回調函數等,你可以根據需求進一步自定義彈出視窗的外觀和行為。詳細的使用指南和示例可以在 SweetAlert2 的官方文件中找到:SweetAlert2 官方文件。
請注意,SweetAlert2 需要引入 Promise 的 polyfill 來支援 IE11。你可以使用 es6-promise 或 es6-promise-promise 來實現 Promise 的 polyfill。在引入 SweetAlert2 之前,你需要在 HTML 文件中引入下列代碼:
<script src="https://cdn.jsdelivr.net/npm/es6-promise@4.2.8/dist/es6-promise.auto.min.js"></script>
這樣就可以在 IE11 中使用 SweetAlert2 套件來自定義彈出視窗,並在按下確認後執行其他 JavaScript 代碼。