如何使用jQuery实现可复用Bootstrap样式alert弹窗容器

1. 前置准备 #

先给弹窗容器设置基础样式，解决你之前遇到的屏幕变黑、位置异常问题：

屏幕变黑大概率是之前参考代码引入了模态遮罩层，下方实现没有额外遮罩，z-index足够高不会被其他元素遮挡

<!-- 你已有的容器节点 -->
<span id="popupNotification"></span>
<style>
.alert-notify-wrapper {
    position: fixed;
    z-index: 9999; /* 确保高于页面所有其他元素 */
    min-width: 400px;
    max-width: 90vw;
}
.alert-notify-wrapper .alert {
    margin: 10px 0;
}
</style>

2. 核心封装代码 #

完全兼容你期望的调用方式，支持HTML内容、多主题模式、自动隐藏、自定义挂载节点：

// 全局变量存储实例，避免重复创建
const GlobalVariables = {
    NotificationWindow: null
};

const appFunc = {
    Alert: function (content, _mode, appendTo, _autoHideAfter) {
        // 补全默认参数
        const mode = _mode ?? "error";
        const autoHideAfter = _autoHideAfter ?? 10000;
        // 映射Bootstrap alert样式类，error对应danger
        const modeClassMap = {
            success: "alert-success",
            warning: "alert-warning",
            info: "alert-info",
            error: "alert-danger"
        };
        const alertClass = modeClassMap[mode] || modeClassMap.error;

        // 如果指定了挂载节点就直接使用，否则用全局固定容器
        if (!appendTo) {
            if (!GlobalVariables.NotificationWindow) {
                GlobalVariables.NotificationWindow = $('<div class="alert-notify-wrapper"></div>').appendTo("#popupNotification");
                // 计算居中位置
                const wWidth = $(window).width();
                const wrapperWidth = GlobalVariables.NotificationWindow.width();
                GlobalVariables.NotificationWindow.css({
                    left: Math.floor(wWidth / 2 - wrapperWidth / 2),
                    top: "30px"
                });
            }
            var container = GlobalVariables.NotificationWindow;
        } else {
            var container = $(appendTo);
        }

        // 生成alert节点
        const alertEl = $(`
            <div class="alert ${alertClass} alert-dismissible fade show" role="alert">
                <div class="alert-content"></div>
                <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
        `);
        // 插入HTML内容，支持标签渲染
        alertEl.find(".alert-content").html(content);
        // 插入容器
        container.prepend(alertEl);

        // 自动隐藏逻辑
        if (autoHideAfter > 0) {
            setTimeout(() => {
                alertEl.alert("close");
            }, autoHideAfter);
        }
    }
};

3. 调用示例 #

和你期望的用法完全一致：

// 签名点击提示
$(document).on("click", "#TypedName", function () {
    appFunc.Alert("By typing your name in the signature box, you are certifying that you are the authorized representative who <br> <div class='text-center'>completed the application and the information provided is accurate to the best of your knowledge.</div>", "warning");
});

// 协议校验提示
if (!document.getElementById("AcceptTerms").checked) {
    e.preventDefault();
    $("#AcceptTerms").focus();
    appFunc.Alert("You must accept terms and conditions in order to proceed to the next step.", "error");
}

4. 异常问题修复 #

如果还有触发时屏幕变黑的情况，按以下两个步骤排查：

• 检查页面全局样式是否给#popupNotification或者父级元素设置了background: rgba(0,0,0,*)类的半透明背景属性，直接覆盖即可
• 检查是否引入了多余的Bootstrap模态框组件逻辑，本实现不需要依赖模态框组件，仅需要基础alert组件即可

内容的提问来源于stack exchange，提问作者S.Purtan