0

utlizo un modal con bootstrap5, en el modal estan los input del registro, quiero hacer que cuando el usuario logre registrarse de forma correcta, este se cierre, pero no me funciona, este es el codigo que cree viendo otro hilo en stackoverflow donde le dicen de eliminar la clase "fade" del modal:

firebase.auth().createUserWithEmailAndPassword(email, pass)



.then((user) => {
   console.log("Usuario creado con exito");
   var modal = document.getElementsByClassName ('modal-register').classList.remove('fade') //Aca deberia irse la ventana modal

  })

El codigo HTML de la ventana modal es el siguiente:

<div class="modal-register modal fade" id="register" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
  <div class="modal-content">
    <div class="modal-header">
      <h5 class="modal-title" id="exampleModalLabel">Registro</h5>
      <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
    </div>
    <div class="modal-body">
      <form>
        <div class="mb-3">
          <p class="error-message"></p>
          <label  for="message-text" class="col-form-label">Nombre Completo</label>
          <input id="name" type="text" class="form-control">
          <label for="message-text" class="col-form-label">Correo Electronico</label>
          <input id="email" type="text" class="form-control" >
          <label for="message-text"  class="col-form-label">Contraseña</label>
          <input id="pass" type="password" class="form-control">
        </div>
        <div class="mb-3">
        </div>
      </form>
    </div>
    <div class="modal-footer">
      <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cerrar</button>
      <button type="button" onclick="register()" class="btn btn-primary">Continuar</button>
    </div>
  </div>
</div>

El codigo de eliminar la ventana modal se ejecuta luego de que el usuario logra registrarse correctamente.

¿Como puedo solucionar esto?

Gracias!

1 respuesta 1

1

Veo que boostrap tiene sus methods para acceder via javascript

https://getbootstrap.com/docs/5.0/components/modal/

Si lo abriste con javascript, deberias guardar la referencia al modal y luego hacer .dispose()

var registerModal = new bootstrap.Modal(document.getElementById('register'), options)

firebase
  .auth()
  .createUserWithEmailAndPassword(email, pass)
  .then((user) => {
   console.log("Usuario creado con exito");
   registerModal.dispose();
  })

Sino debiera funcionarte esto, aunque no se si removeria el backdrop.

document.getElementById('register').remove();
6
  • Me dice que options no esta declarado Commented el 22 dic. 2020 a las 14:40
  • Probando con el codigo de abajo, queda el backdrop, que puedo hacer? Commented el 22 dic. 2020 a las 17:18
  • Y si, options no esta declarado. Usa tus opciones, o no pases ninguna. Mira la documentacion. Por el backrop, inspecciona el sitio y saca algun atributo por el cual puedas borrarlo con document.getElement*.remove() Commented el 23 dic. 2020 a las 12:06
  • document.getElementsByClassName('modal-backdrop')[0].remove() removeria el backdrop, aunque no es la solucion ideal. Lo ideal es que llames el modal, guardes la referencia y luego lo borres con el api js de boostrap Commented el 23 dic. 2020 a las 12:09
  • Muchas gracias emanuel, voy a dejarlo asi por el momento y mas adelante veo como puedo hacer para arreglarlo! Commented el 23 dic. 2020 a las 12:24

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.