mostrar un modal simple de bootstrap 5 al hacer clic en la pagina in javascript

Primero debes agregar la librería de Bootstrap 5 en tu proyecto. Luego, para mostrar un modal al hacer clic en algún elemento de la página, debes agregar un evento click a ese elemento y llamar a la función modal() del modal que quieres mostrar.

index.tsx
        Aquí tienes un ejemplo:

        HTML:

        ```
        <button id="miBoton" type="button" class="btn btn-primary">Mostrar modal</button>

        <div class="modal fade" id="miModal" tabindex="-1" aria-labelledby="miModalLabel" aria-hidden="true">
          <div class="modal-dialog">
            <div class="modal-content">
              <div class="modal-header">
                <h5 class="modal-title" id="miModalLabel">Mi modal</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
              </div>
              <div class="modal-body">
                <p>Contenido del modal...</p>
              </div>
            </div>
          </div>
        </div>
        ```

        JavaScript:

        ```
        const miBoton = document.querySelector('#miBoton');
        miBoton.addEventListener('click', function() {
          const miModal = new bootstrap.Modal(document.querySelector('#miModal'));
          miModal.show();
        });
        ```

        En este ejemplo, primero seleccionamos el botón que activará el modal y le agregamos un evento click que crea un objeto `Modal` de Bootstrap con el div correspondiente y luego llama al método `show()` para mostrar el modal.
1265 chars
34 lines

related categories

gistlibby LogSnag