Javascript, html and css to create an overlay
I'm stuck for a while now with the following problem. I've created an website which contains an overlay. The overlay is placed in the html as below;
<html>
<body>
<div 开发者_如何学Pythonid="overlay"></div>
<div id="wrapper">
<!--More html - snipped-->
<div id="search">
<form method="post" action="Default.aspx?id=999" id="searchForm">
<label for="searchInput">Your searchcriteria:</label>
<input type="text" id="searchInput" />
</form>
</div>
<!--More html - snipped-->
</div>
</html>
The css for the overlay and div#search is as below. There is a bit more css to style the form elements inside the div#search, but since I don't think it's relevant I left this out.
div#search
{
clear:both;
width:990px;
height:50px;
z-index:1002;
display:none;
position:absolute;
margin:49px 0px 0px 0px;
background-color:#FFF;
}
#overlay
{
background-color:#000;
position:fixed;
opacity:0.7;
display:none;
z-index:1001;
width:100%;
height:100%;
top:0;
left:0;
}
When a user clicks an menuitem to open the searchwindow the following bit of javascript is executed. The javascript is just a concept, but it works.
function showSearchBar() {
//Check if search bar is shown, if it is hide it, otherwise show it.
var isVisible = $("#search").is(":visible");
if (isVisible) {
//Hide the div
$("#search").fadeOut(600);
//hide the overlay
$("#overlay").hide();
}
else {
//Show the overlay
$("#overlay").show();
//Show the hidden div
$("#search").fadeIn(600);
//$("input#searchInput").watermark("Enter your criteria");
}
}
The problem here is that whenever the javascript is executed the overlay is being placed at the top of the page disabling every other element on the page, including the searchform. I want the searchform to be available to the users, so it should be on top of the overlay. It's probably a very small issue, but I don't see the problem here. What is causing the overlay to be placed over the searchform instead of the searchform being on top of the overlay?
Problem solved. I modified the html to look like this;
<html>
<body>
<div id="search">
<form method="post" action="Default.aspx?id=999" id="searchForm">
<label for="searchInput">Your searchcriteria:</label>
<input type="text" id="searchInput" />
</form>
</div>
<div id="overlay"></div>
<div id="wrapper">
<!--More html - snipped-->
</div>
</html>
This was necessary because the wrapper has it's own z-index and is positioned relative. By placing the div#search as first element in the body I was sure that it lied on top of all other elements because of it's absolute positioning. Moving the html-element solved my problem. Other suggestions for improvement are welcome.
加载中,请稍侯......
精彩评论