如何让Bootstrap Alert显示在其他元素上方并关闭时恢复d-none类？

针对你的两个需求，直接修改代码即可实现，具体方案如下：

核心修改点 #

• 让Alert居中覆盖：给Alert的外层容器添加固定定位和层级样式，确保它悬浮在页面中间、输入框上方
• 关闭时重新隐藏：监听Bootstrap Alert的关闭完成事件，手动给外层容器加回d-none类

修改后的完整代码 #

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>

<div class="d-flex align-items-center justify-content-center" id="record">
    <div class="input-group mb-3 input-group-lg w-50">
        <input type="text" class="form-control" id="rec-id" placeholder="Enter ID">
        <button class="btn btn-success" id="mybtn" type="button">Enter</button>
    </div>
</div>

<!-- 外层容器添加固定定位与层级样式 -->
<div class="d-flex align-items-center justify-content-center d-none position-fixed top-0 start-0 end-0 z-index-50" id="show-alert">
    <div class="alert alert-danger alert-dismissible fade show row" id="alert-element">
        <button type="button" class="btn-close" data-bs-dismiss="alert"></button>
        <strong>Danger!</strong> 输入无效，请重新输入
    </div>
</div>

const btn = document.getElementById("mybtn");
const alertContainer = document.getElementById("show-alert");
const alertElement = document.getElementById("alert-element");

btn.addEventListener("click", () => {
    const inputVal = document.getElementById("rec-id").value.trim();
    // 模拟输入无效判断（这里以空值为例，可替换成你的实际验证规则）
    if (!inputVal) {
        alertContainer.classList.remove("d-none");
    }
});

// 监听Alert关闭完成事件，重新添加d-none类
alertElement.addEventListener("closed.bs.alert", () => {
    alertContainer.classList.add("d-none");
});

细节说明 #

1. 定位逻辑：position-fixed让容器脱离文档流固定在视口，top-0 start-0 end-0配合d-flex的居中属性，确保Alert始终在页面正中间；z-index-50是Bootstrap内置的高层级类，保证它能覆盖在输入框上方。
2. 关闭事件处理：Bootstrap Alert关闭时会先执行淡出动画，动画结束后触发closed.bs.alert事件，此时给外层容器加d-none，避免容器在Alert消失后仍残留页面。
3. 输入验证：补充了基础的空值判断，符合你“输入值无效时弹出Alert”的需求，可根据业务规则调整验证逻辑。

内容的提问来源于stack exchange，提问作者nb_nb_nb