Within an onclick event in an image, I have a function that I want to use to bind the same function to another div. No jQuery is used.
<img id="img1" onclick="toggle(this)" src="https://images.duckduckgo.com/iu/?u=http%3A%2F%2Ftse3.mm.bing.net%2Fth%3Fid%3DOIP.Mde7815d5c3b846360c29e9aa3ea9a10fH0%26pid%3D15.1&f=1" alt="Image" style="width:128px; height:auto; cursor:pointer; z-index:0;"/>
<p>
Test text
</p>
<p>
Test text 2
</p>
<script type="text/javascript">
function toggle(doc){
var mask = document.getElementById('overlay');
var io = doc.tog ^= 1;
doc.width_org = io ? doc.style.width : doc.width_org;
mask.style.visibility = io ? "visible" : "hidden";
doc.style.zIndex = io ? 2 : 0;
doc.style.width = io ? (doc.naturalWidth + "px") : doc.width_org;
doc.style.align = io ? "center" : "left";
doc.style.vAlign = io ? "middle" : "top";
doc.style.position = io ? "fixed" : "relative";
doc.style.top = io ? "50%" : "0px";
doc.style.left = io ? "50%" : "0px";
doc.style.marginTop = io ? "-" + (doc.naturalHeight / 2) + "px" : "0px";
doc.style.marginLeft = io ? "-" + (doc.naturalWidth / 2) + "px" : "0px";
}
</script>
<div id="overlay" style="position:fixed; top:0px; left:0px; width:100%; height:100%; background:#000000; opacity:0.8; z-index:1; visibility:hidden"></div>
I aim to attach a callback to the toggle function for the ID overlay, passing back doc data. So, when clicking the img, its gallery effect toggles, and clicking the overlay div should also close it similar to clicking the img itself.