Javascript，html和css创建一个覆盖

我卡住了一段时间，现在有以下问题。我创建了一个包含叠加层的网站。叠加层放置在html中，如下所示。Javascript，html和css创建一个覆盖

<html> 
<body> 
    <div id="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>

叠加和div＃搜索的CSS如下。 div＃search中的表单元素的样式更多一些，但是由于我认为它没有关系，所以我将其忽略了。

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; 
}

当用户单击菜单项以打开搜索窗口时，会执行以下JavaScript代码。 JavaScript只是一个概念，但它的工作原理。

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"); 
    } 
}

这里的问题是，无论何时执行JavaScript的覆盖被放置在禁用页面上的所有其他元素，包括searchform页面的顶部。我希望搜索表单可供用户使用，因此它应该位于叠加层之上。这可能是一个非常小的问题，但我在这里看不到问题。什么导致覆盖层被放置在搜索表单上，而不是覆盖层之上的搜索表单？

来源

2011-05-03 Rob

问题已解决。我修改了html，看起来像这样;

<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>

这是必要的，因为包装具有它自己的Z-索引并且相对定位。通过将div＃search作为第一个元素放置在主体中，我确信它因为绝对定位而位于所有其他元素之上。移动html元素解决了我的问题。欢迎提出其他改进建议。

来源

2011-05-03 11:05:56 Rob

Javascript，html和css创建一个覆盖

回答

相关问题