我正在处理一个页面,该页面检查用户当前是否已登录,然后才能执行其他操作。如果用户未登录,则会加载登录模态,并且用户应该无法执行其他操作,除非他登录。到目前为止,这是正在工作的内容:
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