我正在处理一个页面，该页面检查用户当前是否已登录，然后才能执行其他操作。如果用户未登录，则会加载登录模态，并且用户应该无法执行其他操作，除非他登录。到目前为止，这是正在工作的内容：
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>我用bootstrap 5来做CSS，模态加载很完美。我的问题是当我点击模态之外的时候，它仍然隐藏。我不知道我是否做错了什么，因为我已经在另一个页面上试过了，它仍然不起作用。我在Chrome和Firefox上试过了，但是得到了同样的结果。
2条答案
按热度按时间xpcnnkqh1#
问题是您使用的是Bootstrap 5，但语法是Bootstrap 4的语法。Bootstrap 4的所有
data-*属性现在在Bootstrap 5中都是data-bs-*，以帮助用户从Bootstrap的data-*中识别自己的data-*。因此，在您的代码中，将
data-static更改为data-bs-static，将data-keyboard更改为data-bs-keyboard，您的代码应该可以正常工作。soat7uwm2#
有关详细说明
引导程序4
引导程序5