I have a form that slides down on click “signin” and slides up on “close”. I wanted to have a translucent overlay below the form and above the page that will make rest of the page dark and inert to mouse activity. Here is the markup:
<body>
<div id="container" style="position:absolute;with:100%;height:100%">
<div id="overlay"></div>
<form action="#" method="post">Some Form</form>
</div>
The CSS for the overlay:
#overlay{
width:100%;
height:100%;
background-color:#002aff;
opacity:.7;
position:relative;
z-index:1;
display:none;
}
I was calling the overlay and the form using:
$(document).ready(function() {
// Expand Panel
$("#open").click(function(){
$("div#overlay").slideDown("fast");
$("div#panel").slideDown("400");
});
// Collapse Panel
$("#close").click(function(){
$("div#overlay").slideUp("fast");
$("div#panel").slideUp("300");
});
// Switch buttons from "Log In | Register" to "Close Panel" on click
$("#toggle a").click(function () {
$("#toggle a").toggle();
});
});
The problem is this has left the rest of my page inert (no mouse activity in terms of links) throughout the page even if the overlay-er is not active. As a solution to this I tried to .addClass() and .remove() to “#overlay” defining the properties in a class. But still this leaves my page not click-able on load or even after the class is removed…any suggestions!!
Try changing the z-index rule on click, so it is -1 when the overlay is not happening.