Bootstrap 5 当我点击外部时静态模态仍然关闭

Question

我正在处理一个页面，该页面会在用户执行任何其他操作之前检查他当前是否已登录。如果用户未登录，则加载登录模式，除非用户登录，否则他将无法执行任何其他操作。到目前为止，这是有效的：

function checkrater(){
            var rater=document.getElementById("initials").value;
            if(rater.length <=0)
            {
                var myModal = new bootstrap.Modal(document.getElementById('loginModal'), {})
                myModal.toggle()
            }               
        }

而 HTML 是这样的：

<body style="padding:5px;" onload="checkrater();">    
<div class="modal fade show" style="display: block;" 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>

我正在为我的 CSS 使用 bootstrap 5 并且模态加载完美。我的问题是当我在模态外单击时，它仍然隐藏。我不知道我是否做错了什么，因为我已经在另一个页面上尝试过了，但它仍然不起作用。我在 Chrome 和 Firefox 中尝试过，但得到了相同的结果。

Answer 1

问题是您使用的是 Bootstrap 5，但语法是 Bootstrap 4。Bootstrap 4 的所有 data-* 属性现在都是 data-bs-* in Bootstrap 5 以帮助用户从 Bootstrap 的 data-* 中识别他们自己的 data-*。

因此，在您的代码中，将 data-static 更改为 data-bs-static 并将 data-keyboard 更改为 data-bs-keyboard，您的代码应该可以正常工作。

Bootstrap 5 当我点击外部时静态模态仍然关闭

Bootstrap 5 Static Modal Still Closes when I Click Outside

html

javascript

css

bootstrap-modal