iT邦幫忙

1

【感謝費100】請問如何自定義alert UI,或是有外掛能支持阻斷程序運行效果 (能兼容IE11)

  • 分享至 

  • xImage

請問如何自定義alert UI,或是有外掛能支持阻斷程序運行效果 (能兼容IE11)

目前用過幾個套件,有無法兼容IE11,有的無法實現alert時阻斷程序運行,按確認後,其他JS才能繼續運行效果
如,用alert用戶可以看到提示字,知道自己完成送出

alert('資料確認完成');
windows.reload()

用其他套件會一閃而過,直接reload

圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 個回答

1
rain_yu
iT邦研究生 5 級 ‧ 2023-11-16 15:27:08
最佳解答

在兼容IE11並提供自定義外觀的情況下,你可以考慮使用 SweetAlert2 套件。SweetAlert2 是一個彈出視窗的 JavaScript 庫,它提供了許多自定義選項和外觀樣式,並且支援IE11。

以下是使用 SweetAlert2 套件來自定義彈出視窗的示例:

  1. 首先,將 SweetAlert2 的 CSS 和 JavaScript 文件引入到你的 HTML 文件中:
<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>
  1. 然後,你可以使用 SweetAlert2 的 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 代碼。

小MIS iT邦研究生 1 級 ‧ 2023-11-17 08:23:02 檢舉

謝謝您,看來都需要用 callback 方式
沒辦法實現中斷全局代碼,請問能提供轉賬方式嗎?

rain_yu iT邦研究生 5 級 ‧ 2023-11-17 10:31:48 檢舉

$就不用了,我也很常上來發問。
互相交流就好。

我要發表回答

立即登入回答