当我单击外部时，Bootstrap 5 静态模式仍然关闭答案

【问题标题】：Bootstrap 5 Static Modal Still Closes when I Click Outside当我单击外部时，Bootstrap 5 静态模式仍然关闭
【发布时间】：2021-12-28 06:20:35
【问题描述】：

我正在处理一个页面，该页面检查用户当前是否已登录，然后才能执行其他任何操作。如果用户没有登录，登录模式会加载，除非他登录，否则用户应该不能做任何其他事情。到目前为止，这是有效的：

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 中尝试过，但得到了相同的结果。

【问题讨论】：

这能回答你的问题吗？ Prevent Bootstrap Modal from disappearing when clicking outside or pressing escape?
对不起，没有。那里的建议 (data-backdrop="static" data-keyboard="false") 已经在我的代码中，这就是为什么我问我是否做了什么错误，因为它不工作。

标签： javascript html css bootstrap-modal

【解决方案1】：

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

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

【讨论】：

知道了！谢谢你。它现在工作得很好。