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
    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 el 1 nov. 2018 a las 17:01
  • 1
    pedro, usa el modal que te proporciono @enxaneta 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 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
    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 el 1 nov. 2018 a las 17:23
  • miralo otra vez ya edite el problema
    – andy gibbs
    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 el 1 nov. 2018 a las 17:05

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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