JS 判斷 alert 對話框是否彈出：原生 alert 無法檢測，需自定義模態層

需求：按 Enter 提交表單，若彈出「不能為空」原生 alert，連續按 Enter 會疊加彈窗。想檢測 alert 是否打開並阻止重複提交。

核心事實

原生 `alert/confirm/prompt` 是瀏覽器級同步阻塞 UI，JS 無法檢測其打開狀態，也無法程序化關閉。 這是瀏覽器安全機制決定的。

解決方案：替換為自定義模態組件

// 1. 全局狀態標記
let dialogOpen = false;

// 2. 封裝自定義彈窗
function showMsg(msg) {
    if (dialogOpen) return; // 防重複
    dialogOpen = true;
    // 這裡用任意 UI 庫：layer, sweetalert2, bootstrap-modal, 或手寫 DOM
    layer.alert(msg, {
        closeBtn: 0,
        end: () => { dialogOpen = false; } // 關閉回調重置標記
    });
}

// 3. 綁定 Enter 鍵
$(document).keyup(e => {
    if (e.keyCode === 13 && !dialogOpen) {
        $('#submitBtn').trigger('click');
    }
});

// 4. 表單驗證調用 showMsg 而非 alert
if (!name) { showMsg('姓名不能為空'); return; }

推薦輕量庫

• layer：國產、無依賴、API 極簡、layer.alert 完美替代原生。
• SweetAlert2：美觀、Promise API、支持鏈式調用。
• Bootstrap Modal / Ant Design Modal：項目已用對應 UI 框架時首選。

為什麼不用原生 alert？

結論：生產項目禁用原生 alert/confirm，統一接入可控的模態組件，在組件層面管理打開狀態、防抖、可訪問性，才是專業前端工程化做法。

1. 上一篇文章： Java 靜態方法深度理解：不止類名調用，還有反射、方法引用、隱式靜態導入
2. 下一篇文章： C# ArcEngine 拓撲檢查導致 UI 假死：BackgroundWorker 正確異步處理

程式設計綜合問答

Android 打包 APK 報錯：libs 下重複 Jar（android-support-v4 衝突）刪除多餘即可

引入第三方專案後生成 APK 失敗，錯誤提示 Duplica

PL/SQL Developer 中文輸入亂碼終極解決：NLS_LANG、字體、系統區域設置三步走

問題現象 數據庫查詢結果正常顯示中文。 SQL 窗口輸入中

iframe 自適應高度只顯示一半的修復方案

問題 iframe `onload` 獲取高度邏輯有誤，導致

Android 傳遞 Context 到普通類時的空指針陷阱：賦值順序顛倒

錯誤代碼 public class LocalStorage