html - 当我点击某个部分的任何部分时，在页面中央显示一个 div

Question

我需要帮助，我有这段代码:

html:

<section  id="about" class="grid_4">
 <header id="headerabout">The header</header>
  <img id="imgabout" src="../images/software.svg"/>
   <p>Bla bla bla</p>
    <div class="hidden">This should be displayed</div>
</section>

CSS:

*{
font-family: 'Roboto', sans-serif;
font-size: 16px;
margin-top: 0px;
padding: 0px;
color: white;
margin: auto;
list-style-type: none;
text-decoration: none;
}
section {
height: auto;
z-index:15;
overflow: auto;
}

p {
padding: 2px;
}


#headerabout {
height: 24px;
width: 296px;
margin-top: 2px;
}

#about {
height: 380px;
background-color: green;
}

height: auto;
background-color: #b01f1c;
float: left;
margin-bottom: 5px;
text-align: center;

我想做到这一点，无论您点击该部分，它都会将屏幕淡化为黑色，不透明度为 0.8(我已经知道该怎么做)并在屏幕中央显示一个带有额外信息的 div，可以关闭，您可以返回页面。有什么想法吗？

Answer 1

只需使用 jQuery:

$("section").click(function(){
    $(".overlay").fadeIn();
});

$(".close-btn").click(function(){
    $(".overlay").fadeOut();
});

参见:http://jsfiddle.net/XbNC8/