JS Hiding a DIV

[Ben-at-work]

Hi,

 

I'm using this guide to create a modal that appears on our homepage, the idea being I'll only use it for important alerts (snow days etc).

 

It works fine, the only issue I have is that the close button requires two clicks to close. Looking the code I think what the function is doing is trying to show the div with the first click then on the second is when it hides it. I am a complete newbie to JS so would appreciate some help in getting the modal to close after one click.

 

function overlay() {
el = document.getElementById("overlay");
el.style.visibility = (el.style.visibility == "visible") ? "hidden" : "visible";
}

 

  
    
         
13/01/2016, 07:17am - School is closed today due to severe weather. For more information please see our Facebook page.
        
Close
    

 

/* Alert */

#overlay {
    visibility: visible;
    position: fixed;
    left: 0px;
    top: 0px;
    width: 100%;
    height: 100%;
    text-align:center;
    z-index: 1000;
    background-image:url("images/alert.png");
}

#overlay div {
    border-radius: 15px;
    width: 75%;
    height: 75%;
    margin: 100px auto;
    background-color: #1c1d26;
    border: 1px solid #ffcc00;
    padding: 10px 10px;
    text-align:center;
}

[Steve21]

If you just want a quick fix just use

 

 

 

So it's set as visible at the start

 

If you haven't set it the first click doesn't know so will set to visible although it already is

 

Steve

[Ben-at-work]

Beautiful, thank you!