Hide Div onClick
HTML
<a href="#" onclick="show('mydiv')">Open DIV</a>
<div id="mydiv">
<div id="mydiv-container">
<div id="mydiv-content">
<h1>Current Time Left</h1>
<div id="countdown"></div>
<br>Click the link to close.
<br>
<a href="#" onclick="hide('mydiv')">Close</a>
</div>
</div>
</div>
CSS
body {
height: 100%;
background-color: #F0F0F0;
font-family: Arial, sans-serif;
}
#mydiv {
width: 100%;
height: 100%;
overflow: hidden;
left: 100px;
top: 100px;
position: absolute;
opacity: 0.5;
z-index: 200;
}
#mydiv-container {
margin-left: auto;
margin-right: auto;
}
#mydiv-content {
width: 70%;
padding: 20px;
background-color: white;
border: 1px solid #6089F7;
}
a {
color: #5874BF;
text-decoration: none;
}
a:hover {
color: #112763;
}
JavaScript
function show(target) {
document.getElementById(target).style.display = 'block';
}
function hide(target) {
document.getElementById(target).style.display = 'none';
}
function countdown(elementName, minutes, seconds) {
var element, endTime, hours, mins, msLeft, time;
function twoDigits(n) {
return (n <= 9 ? "0" + n : n);
}
function updateTimer() {
msLeft = endTime - (+new Date);
if (msLeft < 1000) {
element.innerHTML = "countdown's over!";
} else {
time = new Date(msLeft);
hours = time.getUTCHours();
mins = time.getUTCMinutes();
element.innerHTML = (hours ? hours + ':' + twoDigits(mins) : mins) + ':' + twoDigits(time.getUTCSeconds());
setTimeout(updateTimer, time.getUTCMilliseconds() + 500);
}
}
element = document.getElementById(elementName);
endTime = (+new Date) + 1000 * (60 * minutes + seconds) + 500;
updateTimer();
}
countdown("countdown", 1, 00);