淡入灯箱中，然后点击背景并使其消失

Question

嗨！我试图制作一个灯箱，而且我已经有了一切工作。您可以click here to see it in live mode。我现在想要做的是能够点击背景，然后框将消失。此外，当您点击“ÅpneLysbildefremvisningen”时，灯箱和背景将会很好地褪色，当您点击“关闭”并点击背景时，它会淡出。我无法理解如何做到这一点。谢谢！

的Index.html

<h1><a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'">Start lysbildevisningen</a></h1> 

的style.css

.black_overlay { 
display: none; 
position: absolute; 
top: 0%; 
left: 0%; 
width: 100%; 
height: 100%; 
background-color: black; 
z-index:1001; 
-moz-opacity: 0.1; 
opacity:.10; 
filter: alpha(opacity=10); 
} 
.white_content { 
    display: none; 
    position: absolute; 
    top: 30%; 
    left: 30%; 
    width: 640px; 
    padding: 10px; 
    background-color: #FFF; 
    z-index:1002; 
    overflow: auto; 
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5); 
} 

Answer 1

你应该听与black_overlay类的div的单击事件。并在其中，更改主div的style.display。

你有没有使用客户端框架作为jQuery的OW EXTJS？他们可以减轻这种工作量，并且基于这些框架的一些插件可以为您完成所有工作。只有当你对学习javaScript基础知识感兴趣时，从头开始编写所有代码才是一个很好的选择。