Hola, estoy tratando de deshabilitar el clic externo en mi modal. Intenté usar métodos como telón de fondo: 'estático', teclado: falso pero parece que no puedo hacerlo funcionar
html:
<div class="container my-5"> <hr class="my-5"> <!-- Modal --> <div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data- keyboard="false"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <center><h1 class="modal-title" id="exampleModalLabel">Want more?</h1></center> </button> </div> <div class="modal-body"> <strong>Create an account or Log in to see additional search results...</strong> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button> <button type="button" class="btn btn-primary">Log In</button> </div> </div> </div> </div>JavaScript:
$(function() { $('#basicExampleModal').modal('show'); });Tiene un par de problemas de sintaxis en el código que publicó. Ex. la etiqueta extra </button> y data- keyboard="false"> tiene un espacio en ella. Además de los problemas de sintaxis, debería funcionar como se espera, como puede ver en el siguiente ejemplo. Si todavía no funciona en su extremo, hay algo más mal en otra parte de su código.
$('#basicExampleModal').modal('show'); <html lang="en"> <head> <!-- Bootstrap CSS --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/css/bootstrap.min.css"> <!-- jQuery first, then Popper.js, then Bootstrap JS --> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.3/dist/umd/popper.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.1.3/dist/js/bootstrap.min.js"></script> </head> <body> <div class="container my-5"> <hr class="my-5"> <!-- Modal --> <div class="modal fade" id="basicExampleModal" tabindex="-1" role="dialog" aria- labelledby="exampleModalLabel" aria-hidden="true" data-backdrop="static" data-keyboard="false"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <center> <h1 class="modal-title" id="exampleModalLabel">Want more?</h1> </center> </div> <div class="modal-body"> <strong>Create an account or Log in to see additional search results...</strong> </div> <div class="modal-footer"> <button type="button" class="btn btn-secondary" data-dismiss="modal">Sign up</button> <button type="button" class="btn btn-primary">Log In</button> </div> </div> </div> </div> </div> </body> </html>Utilizar este:
$(function() { $('modal_id').modal('show'); $('modal_id').modal({ keyboard: false, backdrop: 'static' }) });Este script ahora permitirá cerrar el modal haciendo clic fuera del modal o presionando la tecla esc .