Meta:
Cierre el modal bootstrap 5 con código javascript después de mostrar el mensaje de alerta.
Problema:
No puedo hacer que la función myFunction funcione y también cerrar el modal después de mostrar un mensaje de alerta con código javascript.
Información:
*No debe usar 'data-bs-dismiss="modal"'
JSBIN:
https://jsbin.com/sileqajiho/edit?html,js,salida
¡Gracias!
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> </head> <body> <div class="container mt-3"> <h3>Modal Example</h3> <p>Click on the button to open the modal.</p> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal"> Open modal </button> </div> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <!-- Modal body --> <div class="modal-body"> Modal body.. </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" onclick="myFunction()" >Start</button> </div> </div> </div> </div> <script> function myFunction() { alert("test") } <script> </body> </html> var myModal = document.getElementById('staticBackdrop'); var modal = bootstrap.Modal.getOrCreateInstance(myModal) modal.show()https://jsbin.com/ciqocavoge/edit?html,js,salida
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"> </head> <body> <div class="container mt-3"> <h3>Modal Example</h3> <p>Click on the button to open the modal.</p> <button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#myModal"> Open modal </button> </div> <!-- The Modal --> <div class="modal" id="myModal"> <div class="modal-dialog"> <div class="modal-content"> <!-- Modal Header --> <div class="modal-header"> <h4 class="modal-title">Modal Heading</h4> <button type="button" class="btn-close" data-bs-dismiss="modal"></button> </div> <!-- Modal body --> <div class="modal-body"> <button type="button" onclick="test1()">Close me via script</button> </div> <!-- Modal footer --> <div class="modal-footer"> <button type="button" class="btn btn-danger" onclick="myFunction22()" >Start</button> </div> </div> </div> </div> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <script> function test1() { alert("sdf"); modalInstance.hide() } </script> </body> </html> ------------- var modalInstance = null; var modelElem = document.querySelector('#myModal'); modelElem.addEventListener('shown.bs.modal', function (){ modalInstance = bootstrap.Modal.getInstance(modelElem); });bueno, hasta donde sé, tienes que usar new , este es un ejemplo de un brindis
var myToast = new bootstrap.Toast(toastDiV, opts) myToast.show()porque son clases, tienes que hacer referencia a una nueva instancia