Skip to main content
se añadieron 16 caracteres en el cuerpo
Origen Enlace
andy gibbs
  • 2k
  • 3
  • 21
  • 37

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:60%;70%;
background:white;
padding:10px;
border-radius:10px;
}
#close{
  padding:5px;
  background:red;
  color:white;
  width:100%;auto;
  font-size:10px;
  cursor:pointer;
}
  #close:hover{

  background:#F4F4F4;#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>

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:60%;
background:white;
padding:10px;
border-radius:10px;
}
#close{

  width:100%;
  font-size:10px;
  cursor:pointer;
}
  #close:hover{

  background:#F4F4F4;
  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>

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>

Origen Enlace
andy gibbs
  • 2k
  • 3
  • 21
  • 37

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:60%;
background:white;
padding:10px;
border-radius:10px;
}
#close{

  width:100%;
  font-size:10px;
  cursor:pointer;
}
  #close:hover{

  background:#F4F4F4;
  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>