Blazor多Bootstrap模态框切换时前序模态框无法关闭问题求助

无法关闭模态框的核心原因有4个： #

1. 模态框结构不符合Bootstrap规范：Bootstrap要求模态框最外层容器必须带modal类，你当前写的最外层只有modal-dialog类，modal()方法是绑定在带modal类的元素上，调用对象错误自然无法关闭。
2. Bootstrap版本适配问题：你的代码里用了data-bs-*前缀（Bootstrap 5的属性规范），但JS代码用的是Bootstrap 3/4的$().modal('hide')写法，Bootstrap 5已经不支持这种jQuery调用方式，需要用原生API操作模态框实例。
3. 事件绑定不生效：第二个模态框的返回按钮没有加custom-close2类，你写的对应jQuery事件绑定的触发对象不存在，不会执行。同时你同时给元素绑定了Blazor的@onclick和jQuery的click事件，执行顺序不确定，容易出现新模态框先打开、旧模态框后关的冲突。
4. Blazor组件逻辑冲突：你用了Blazor封装的modal.Show()组件控制模态框显示，直接用JS修改DOM状态无法同步组件内部的显示状态，后续触发会出现状态不一致的问题。

修复方案 #

1. 修正模态框结构，给所有模态框补充外层modal类容器：

<!-- 第一个模态框 -->
<div class="modal fade" id="myModal" tabindex="-1">
    <div class="modal-dialog" style="margin-left:-200px;margin-bottom:-550px;position:absolute;">
        <div class="modal-content" style="background-color:gray;">
            <div class="modal-body" style="color:black;">
                <p>此处可查看其他用户对幕布的控制操作，若队列为空且你想要获得控制权，可点击对应按钮。</p>
                <div class="modal-footer" style="float:right;border:none;margin-bottom:-25px;">
                    <label class="custom-close" @onclick="OpenSecondModal">Next page</label>
                    <button class="next-button" style="margin-left:-3px;"><i class="fa fa-angle-right"></i></button>
                </div>
            </div>
        </div>
    </div>
</div>
<img src="css/arrow-help.png" class="arrow-help">

<!-- 第二个模态框 -->
<div class="modal fade" id="myModal2" tabindex="-1">
    <div class="modal-dialog" style="margin-left:-200px;margin-bottom:-550px;position:absolute;">
        <div class="modal-content" style="background-color:gray;">
            <div class="modal-body" style="color:black;">
                <p>如果队列中有其他用户，可点击此处排队。</p>
                <div class="modal-footer" style="float:right;border:none;margin-bottom:-25px;">
                    <label class="custom-close2" @onclick="OpenFirstModal">Previous page</label>
                    <button class="next-button" style="margin-left:-3px;margin-top:-2px;"><i class="fa fa-angle-right"></i></button>
                </div>
            </div>
        </div>
    </div>
</div>
<img src="css/arrow-help2.png" class="arrow-help2">

2. 统一用Blazor逻辑控制模态框开关，避免混用jQuery和Blazor事件冲突，在页面代码中添加如下逻辑：

@inject IJSRuntime JSRuntime

@code {
    private async Task OpenSecondModal()
    {
        // 先调用Bootstrap 5 API关闭第一个模态框
        await JSRuntime.InvokeVoidAsync("eval", "bootstrap.Modal.getInstance(document.getElementById('myModal')).hide()");
        // 再打开第二个模态框
        modal.Show<LandingPageHelpPopUp2>();
    }

    private async Task OpenFirstModal()
    {
        // 先关闭第二个模态框
        await JSRuntime.InvokeVoidAsync("eval", "bootstrap.Modal.getInstance(document.getElementById('myModal2')).hide()");
        // 再打开第一个模态框
        modal.Show<LandingPageHelpPopUp>();
    }
}

3. 如果你坚持使用jQuery实现关闭逻辑，替换原有的JS代码为如下适配Bootstrap 5的写法，同时用事件委托解决动态渲染元素绑定失效的问题：

$(function () {
    $(document).on('click', ".custom-close", function () {
        const myModal = new bootstrap.Modal(document.getElementById('myModal'));
        myModal.hide();
    });
    $(document).on('click', ".custom-close2", function () {
        const myModal2 = new bootstrap.Modal(document.getElementById('myModal2'));
        myModal2.hide();
    });
});

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