当我单击外部时，Bootstrap 5 静态模式仍然关闭
Posted
技术标签:
【中文标题】当我单击外部时，Bootstrap 5 静态模式仍然关闭【英文标题】：Bootstrap 5 Static Modal Still Closes when I Click Outside 【发布时间】：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") 已经在我的代码中，这就是为什么我问我是否做了什么错误，因为它不工作。 【参考方案1】：问题是您使用的是 Bootstrap 5，但语法是 Bootstrap 4。Bootstrap 4 的所有 data-* 属性现在在 Bootstrap 5 中都是 data-bs-*，以帮助用户识别他们自己的 data-* Bootstrap 的。
因此，在您的代码中，将 data-static 更改为 data-bs-static 和 data-keyboard 更改为 data-bs-keyboard，您的代码应该可以正常工作。
【讨论】：
知道了！谢谢你。它现在工作得很好。以上是关于当我单击外部时，Bootstrap 5 静态模式仍然关闭的主要内容，如果未能解决你的问题，请参考以下文章
Bootstrap 模式关闭时 Youtube 视频仍在播放