Ok I am trying to set up a webpage where the image overlay is closeable by a mouse click anywhere on the page as well as the "close" button I have already coded. This works already so I think I just need a function to make the image overlay close on a mouse click. I can't seem to find a specific answer online and it is driving me crazy. Any suggestions would greatly be appreciated.
-------------------------------------------Here is the code I placed in between the <head> tags of my webpage.
-----------------------------------------------------------------------------------
The owner of the website says the close button at the bottom of the overlay isn't enough, they also want it to close on mouse click. Is that even possible?
Thanks
-------------------------------------------Here is the code I placed in between the <head> tags of my webpage.
Code:
<style type="text/css">
div#overlay {
display: none;
z-index: 2;
background: #000;
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
text-align: center;
}
div#specialBox {
display: none;
position: relative;
z-index: 3;
margin: 0px auto 0px auto;
width: 00px;
height: 00px;
background: #FFF;
color: #000;
}
div#wrapper {
position:absolute;
top: 0px;
left: 0px;
padding-left:24px;
}
</style> <script type="text/javascript">
function toggleOverlay(){
var overlay = document.getElementById('overlay');
var specialBox = document.getElementById('specialBox');
overlay.style.opacity = .8;
if(overlay.style.display == "block"){
overlay.style.display = "none";
specialBox.style.display = "none";
} else {
overlay.style.display = "block";
specialBox.style.display = "block";
}
}
</script>
----------------------------------------------------Here is the code I placed in the <body> tags.
<body onload = "toggleOverlay()" > <div id="overlay"></div> <div id="specialBox"> <p><img src="http://bytes.com/MY-IMAGE-IN-THE-ROOT-OF-WEBSITE" /> <button onmousedown="toggleOverlay()">Close</button></p> </div>
The owner of the website says the close button at the bottom of the overlay isn't enough, they also want it to close on mouse click. Is that even possible?
Thanks
Comment