Estoy trabajando en una página que verifica si el usuario está conectado actualmente antes de que pueda hacer cualquier otra cosa. Si el usuario no ha iniciado sesión, el modal de inicio de sesión se carga y el usuario no debería poder hacer nada más a menos que inicie sesión. Hasta ahora, esto es lo que funciona:
function checkrater(){ var rater=document.getElementById("initials").value; if(rater.length <=0) { var myModal = new bootstrap.Modal(document.getElementById('loginModal'), {}) myModal.toggle() } }y el HTML es este:
<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>Estoy usando bootstrap 5 para mi CSS y el modal se carga perfectamente. Mi problema es que cuando hago clic fuera del modal, todavía se oculta. No se si hice algo mal porque ya lo probe en otra pagina y sigue sin funcionar. Lo probé en Chrome y Firefox pero obtuve el mismo resultado.
El problema es que está utilizando Bootstrap 5, pero la sintaxis es de Bootstrap 4. Todos los atributos data-* de Bootstrap 4 ahora son data-bs-* en Bootstrap 5 para ayudar al usuario a identificar sus propios data-* de Bootstrap. .
Entonces, en su código, cambie data-static a data-bs-static & data-keyboard a data-bs-keyboard y su código debería funcionar bien.