Bootstrap 5 静态模态框点击外部仍自动关闭问题咨询

• Bootstrap 5 中通过JavaScript初始化模态框时，传入的配置项优先级高于HTML上的data-*属性，你初始化时传入了空对象{}，覆盖了HTML中定义的data-backdrop="static"、data-keyboard="false"配置，导致静态锁定规则未生效。
• 你手动给模态框DOM添加了show类和style="display: block;"内联样式，和Bootstrap模态框自带的状态管理逻辑冲突，也可能引发状态异常。

1. 调整JS初始化代码，明确传入静态锁定配置：

function checkrater(){
    var rater=document.getElementById("initials").value;
    if(rater.length <=0)
    {
        // 初始化时明确指定static backdrop和禁用键盘关闭
        var myModal = new bootstrap.Modal(document.getElementById('loginModal'), {
            backdrop: 'static',
            keyboard: false
        })
        myModal.show() // 建议用show代替toggle，避免重复触发时意外隐藏模态框
    }               
}

2. 清理HTML中冗余的手动样式，删除模态框标签上的show类和display:block内联样式：

<body style="padding:5px;" onload="checkrater();">    
<div class="modal fade" id="loginModal" role="dialog" data-backdrop="static" data-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="staticBackdropLabel">Please login</h5>              
              </div>
              <div class="modal-body">
                ...
              </div>
              <div class="modal-footer">                
                <button type="button" class="btn btn-primary">Login</button>
              </div>
            </div>
          </div>
        </div>

修改完成后即可实现点击模态框外部不关闭、ESC按键不关闭的效果，满足登录前禁止其他操作的需求。

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