Estoy usando React, Bootstrap y jQuery todos juntos. No me preguntes por qué, sé que es horrible, simplemente no tengo tiempo para deshacerme de jQuery. Uso Bootstrap v5 y obtuve un modal allí, js:
<div className='modal fade' id="exampleModal" aria-labelledby="exampleModalLabel" aria-hidden="true" > <div className="modal-dialog modal-dialog-centered"> <div className="modal-content"> <div className="modal-header"> <h5 className="modal-title" id="exampleModalLabel"> Select here </h5> </div> </div> </div> </div>Ahora, también obtuve lo siguiente, js:
<a className="nav-link wallet-btn" data-bs-toggle="modal" data-bs-target="#exampleModal" > Connect here </a> y esto <a solo abre un modal que es genial. Modal tiene un botón x , js:
<button type="button" className="btn-close" data-bs-dismiss="modal" aria-label="Close" ></button>y hacer clic en él simplemente cierra el modal.
Problema Necesito poder cerrar el modal programáticamente. Como puede ver, bootstrap hace todo esto con creo (no estoy seguro) - data-bs-dismiss="modal" , pero ahora necesito tal cosa programáticamente. Intenté establecer el setAttribute pero no funcionó.
Prefiere usar js directo muy rápido en algún lugar que lo solucione en lugar de otro código jQuery.
https://getbootstrap.com/docs/4.0/components/modal/#methods
Mostrar $('#myModal').modal('show')
Ocultar $('#myModal').modal('hide')