How to close a modal?

Question

How to close a modal?

Navigation

#1 by (2 votes)
#2 by (1 votes)
#3 by (1 votes)
#4 by (0 votes)

0

I'm doing a "start session" button that when clicked, a modal appears below it to put your data and be able to login. The issue is that I do not have much experience and I do not know how to close it. I'm doing it with HTML CSS JS and NodeJS. The modal code is this:

<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>

with css I made the modal id occupy the whole screen but it is transparent and the modal container is a lot smaller and is in a part of the screen. What I want is that when I touch the modal that occupies all or another part that is not the modalcontainer, the modalcontainer will close. How can I do?

With JS to open the modal I did this:

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

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

To close it as I had thought, try this but it did not work:

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

Thank you very much!

javascript html css

asked by Pedro Danderfer 01.11.2018 в 17:50

source

4 answers

Can I use the same id on several labels? Position elements within a cell (td) of an HTML table

score 2 · Answer 1

I leave you this messy code, it's the easiest way I found

   //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>

score 1 · Answer 2

1

to close a modal I use this:

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

answered by 01.11.2018 в 18:00

score 1 · Answer 3

I hope this is what you need: I added a <span id="cerrar"> element where if you click the modal one closes. On the other hand if you click on a <button type="submit"> the program sends the form and the page reloads.

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>

score 0 · Answer 4

you can use:

   //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"

})