Estoy enfrentando un problema en la ventana emergente modal de bootstrap 5.1 y obtengo el error Cannot read property 'classList' of undefined . Probé ambos códigos al mostrar una ventana emergente modal y aún existe el mismo problema. Quiero llamar a esta ventana emergente modal a través del método javascript solo porque tengo el requisito de mostrar una ventana emergente modal basada en escenarios.
function show() { var myModal = new bootstrap.Modal(document.getElementById('myModal'),{}) myModal.show(); } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" onclick="show()"> Open modal </button> <!-- 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" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div>Actualizado, usando javascript activado:
Se puede encontrar más en la documentación: https://getbootstrap.com/docs/5.0/components/modal/#live-demo
¿Por qué está utilizando dos archivos JS de arranque? También incluye la última versión disponible:
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> const myModal = new bootstrap.Modal(document.getElementById('myModal'), {}); const trigg = document.querySelector('#modal-trigger'); function showModal(el){ el.show(); } // Event 1: show after 1 second: setTimeout(function() { showModal(myModal); trigg.style.display = 'inline-block'; }, 1000) // Event 2: show on click: trigg.addEventListener('click', function(){ showModal(myModal); }); #modal-trigger { display: none; } <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script> <!-- Button to Open the Modal --> <button type="button" class="btn btn-primary" id="modal-trigger"> Open modal </button> <!-- 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" data-bs-dismiss="modal">Close</button> </div> </div> </div> </div>Si realmente debe mezclar Vanilla JS con jQuery (por cualquier motivo), puede hacer lo siguiente:
const trigg = $('#modal-trigger'); trigg.on('click', function(){ showModal(myModal); });estabas cerca,
nuevo bootstrap.Modal espera otro parámetro.
var myModal = new bootstrap.Modal(document.getElementById('myModal'), {})Las respuestas anteriores son correctas. La razón por la que su ventana emergente no se muestra es porque no está definida.
Esto me sucedió hoy, estaba haciendo una representación condicional de un modal en React. Lo que estaba pasando exactamente es que mientras devolvía el marcado modal también estaba llamando a una función para mostrarlo.
El error fue que estaba tratando de mostrar el modal mientras aún no se devolvía, por lo que document.getElementById('myModal') no estaba definido. Para resolver esto, siempre rendericé el modal y lo mostré solo si cierta condición era cierta.
Siento llegar tan tarde, y espero poder ayudar a alguien con este problema.