modal close button doesnt work

Question

I have modal div that contains close button and some text. When I click button this works. But when I click close img this doesn't work. I dont understand nothing in console appears, but function doesn't work. Why?

 document.getElementsByTagName("a")[0].addEventListener("click", function(event) { event.preventDefault() }); var appereance = true; var mod = document.getElementById("modal"); function modal() { if (appereance) { mod.style.display = "block"; appereance = false; } else { mod.style.display = "none"; appereance = true; } } function close() { mod.style.display = "none"; } 

 #modal { border: 5px solid black; width: 300px; box-sizing: border-box; padding: 15px; border-radius: 20px; display: none; } i { border: 2px solid black; padding: 10px; box-sizing: border-box; border-radius: 50%; } #modal>div { width: 50px; } 

 <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet"/> <a href="#" onclick="modal()">Demo modal</a> <div id="modal"> <div onclick="close()"> <i class="fa fa-close"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <p>Click <a href="#">close</a> adipisicing elit.</p> </div> 

Answer 1

You must rename close function. Javascript will prevent it from firing if you use close . I usually add underscore in the beginning :)

 var appereance = true; var mod = document.getElementById("modal"); function modal() { if (appereance) { mod.style.display = "block"; appereance = false; } else { mod.style.display = "none"; appereance = true; } } function _close() { mod.style.display = "none"; appereance = true; } 

 #modal { border: 5px solid black; width: 300px; box-sizing: border-box; padding: 15px; border-radius: 20px; display: none; } i { border: 2px solid black; padding: 10px; box-sizing: border-box; border-radius: 50%; cursor: pointer; } #modal>div { width: 50px; } 

 <a href="#" onclick="modal()">Demo modal</a> <div id="modal"> <div > <i class="fa fa-close" onclick="_close()"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <p>Click <a href="#">close</a> adipisicing elit.</p> </div> 

Answer 2

close() is already a predefined function. Please change the name of the function to something else and try again.

Here is a working example

// Code goes here

var appereance = true;
var mod = document.getElementById("modal");

function modal() {

  if (appereance) {

    mod.style.display = "block";
    appereance = false;
  } else {
    mod.style.display = "none";
    appereance = true;
  }

}

function closeMe() {
  mod.style.display = "none";
}

Answer 3

The listener to "close" the dialogue is on DIV that is a sibling of the link with text "close", so the event doesn't bubble to it. Move the listener to the link.

Also, the global "close" references window.close , and browsers will not let you close a window you didn't open, so nothing happens. Change the name of the function to say "closeDialogue".

 document.getElementsByTagName("a")[0].addEventListener("click", function(event) { event.preventDefault(); }); var appereance = true; var mod = document.getElementById("modal"); function modal() { if (appereance) { mod.style.display = "block"; appereance = false; } else { mod.style.display = "none"; appereance = true; } } function closeDialogue() { mod.style.display = "none"; } 

 #modal { border: 5px solid black; width: 300px; box-sizing: border-box; padding: 15px; border-radius: 20px; display: none; } i { border: 2px solid black; padding: 10px; box-sizing: border-box; border-radius: 50%; } #modal>div { width: 50px; } 

 <a href="#" onclick="modal()">Demo modal</a> <div id="modal"> <div> <i class="fa fa-close"></i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <p>Click <a href="#" onclick="closeDialogue()">close</a> adipisicing elit.</p> </div> 

Answer 4

It's working after I changed a few of things here.

1. Corrected the spelling of appearance
2. Called it false by default, and used it (correctly) as a flag for the display of the dialogue box.
3. Used x instead of font-awesome in order to display a "closable" sign for that icon just for demoing the working of code. You may add font-awesome CSS classes to it later.

That's it! Check it yourself.

 document.getElementsByTagName("a")[0].addEventListener("click", function(event) { event.preventDefault(); }); var appearance = false; var mod = document.getElementById("modal"); function modal() { if (appearance) { mod.style.display = "none"; appearance = false; } else { mod.style.display = "block"; appearance = true; } } function closeDialogue() { mod.style.display = "none"; appearance = false; } 

 #modal { border: 5px solid black; width: 300px; box-sizing: border-box; padding: 15px; border-radius: 20px; display: none; } i { border: 2px solid black; padding: 10px; box-sizing: border-box; border-radius: 50%; } #modal>div { width: 50px; } 

 <a href="#" onclick="modal()">Demo modal</a> <div id="modal"> <div onclick="closeDialogue()"> <i>x</i> </div> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. </p> <p>Click <a href="#" onclick="closeDialogue()">close</a> adipisicing elit.</p> </div>