0

estoy haciendo un boton "inciar sesion" que cuando se lo clickea sale un modal abajo de el para poner tus datos y poder logear. El tema es que no tengo mucha experiencia y no se como cerrarlo. Lo estoy haciendo con HTML CSS JS y NodeJS. El codigo del modal es este:

<div id="modal">
<div id="modalcontainer">
    <h3>Iniciar sesión</h3>
    <input type="text" placeholder="Usuario" id="modaluser">
    <input type="password" placeholder="Contraseña" id="modalpassword">
    <button type="submit">Ingresá</button>
</div>

con css hice que el id modal ocupe toda la pantalla pero sea transparente y el modal container es muchisimo mas chico y esta en una parte de la pantalla. Yo lo que quiero es que cuando toque el modal que ocupa todo o otra parte que no sea el modalcontainer el modalcontainer se cierre. ¿Como puedo hacer?

Con JS para abrir el modal hice esto:

 var btnlogin=document.getElementById("btnlogin");
        var modal=document.getElementById("modal");

        function modaldisplay(){
            modal.style.display="inline";
        }

Para cerrarlo como tenia pensado intente esto pero no funciono:

modal.onclick(function modalclose(){
            modal.style.display="none";
        })

Muchisimas gracias!

3
  • 1
    recomiendo que uses boostrap 4 para empesar es muy practico y te ayuda a entender muchos conceptos, tambien tienes modales predeterminados y no tienes que estar creandolos por ti mismo
    – andy gibbs
    Commented el 1 nov. 2018 a las 16:55
  • 1
    Es que no aclare, no quiero usar bootrap 4, ni ningun frame, por que quiero aprender bien html, css, js y eso Commented el 1 nov. 2018 a las 17:01
  • 1
    pedro, usa el modal que te proporciono @enxaneta Commented el 1 nov. 2018 a las 17:15

4 respuestas 4

2

te dejos este troso de codigo, es la menera mas facil que encontre

   //obtener el div con el id close para cerrar modal
var close=document.getElementById("close")
  //obtener todo el modal
var modal=document.getElementById("modal");
  //poner a la ecucha de un click el div con el id close
close.addEventListener("click",function(){

  modal.style.display="none"

})
#modal{

 width:100%;
 height:100vh;
display:flex;
background:rgba(0,0,0,0.5);
justify-content:center;
align-items:center;
}

#modalcontainer{

 width:60%;
height:70%;
background:white;
padding:10px;
border-radius:10px;
}
#close{
  padding:5px;
  background:red;
  color:white;
  width:auto;
  font-size:10px;
  cursor:pointer;
}
  #close:hover{

  background:#000;
  color:white;
  cursor:pointer;
}
<div id="modal">
<div id="modalcontainer">
<div id="close">
X
</div>
    <h3>Iniciar sesión</h3>
    <input type="text" placeholder="Usuario" id="modaluser">
    <input type="password" placeholder="Contraseña" id="modalpassword">
    <button type="submit">Ingresá</button>
</div>

4
  • Ese modal es muy útil yo lo uso para mis paginas y no depender de una librería Commented el 1 nov. 2018 a las 17:12
  • 1
    es bueno aprender primero los conceptos a codigo puro si y como funciona todo , luego puedes aprender framworks para facilitar el trabajo
    – andy gibbs
    Commented el 1 nov. 2018 a las 17:16
  • Me sirvio el comando de modal.addeventlistener pero el problema es que cuando toco el modal container. o alguna parte de su contenido se cierra el modal Commented el 1 nov. 2018 a las 17:23
  • miralo otra vez ya edite el problema
    – andy gibbs
    Commented el 1 nov. 2018 a las 17:24
1

para cerrar un modal yo utilizo esto:

 $("#IDdelModal").modal("hide");
1

Espero que esto sea lo que necesitas: he añadido un elemento <span id="cerrar">donde si haces click el modal se cierra. Por de otra parte si haces click en un <button type="submit"> el programa envía el formulario y la página vuelve a cargarse.

function modaldisplay() {
  modal.style.display = "inline";
}


function modalclose() {
  modal.style.display = "none";
}



btnlogin.addEventListener("click", modaldisplay);

cerrar.addEventListener("click", modalclose);
#modal{display:none}
#cerrar{cursor:pointer;}
<div id="modal">
  <span id="cerrar">x</span>
<div id="modalcontainer">
    <h3>Iniciar sesión</h3>
  <form>
    <input type="text" placeholder="Usuario" id="modaluser">
    <input type="password" placeholder="Contraseña" id="modalpassword">
    <button type="submit">Ingresá</button>
  </form>
</div>
</div>

<button id="btnlogin">login</button>

0

puedes usar:

   //obtener el div con el id close para cerrar modal
var close=document.getElementById("close")
  //obtener todo el modal
var modal=document.getElementById("modal");
  //poner a la ecucha de un click el div con el id close
close.addEventListener("click",function(){

  modal.style.display="inherit"

})
1
  • Pero el $ no es para boostrap o un frame? no entiendo donde poner el $("#IDdelModal").modal("hide"); y como indicarle que cuando se clickee el modal se cierre todo el modal Commented el 1 nov. 2018 a las 17:05

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.