Javascript lightbox不會在html標籤內部起作用

Question

Above is with section tag and below is without我需要在部分標籤中放入燈箱。只是不確定爲什麼會發生這種情況或如何覆蓋這一點。燈箱正在出現，但它不會關閉，並在圖像後面。下面是代碼：

<section id="XXX"> 
<div id="light" class="white_content">This is the lightbox content. <a href   = "javascript:void(0)" onclick = "document.getElementById('light').style.display='none';document.getElementById(' fade').style.display='none'">Close</a></div> 
<div id="fade" class="black_overlay"></div> 


    <a href = "javascript:void(0)" onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"> 
        <img src="Image.jpg" alt="Image" height="256" width="300"> 
        </a> 

</section> 

沒有在CSS表示存在有一個問題...

 .black_overlay{ 
    display: none; 
    position: absolute; 
    top: 0%; 
    left: 0%; 
    width: 100%; 
    height: 100%; 
    background-color: black; 
    z-index:1001; 
    -moz-opacity: 0.8; 
    opacity:.80; 
    filter: alpha(opacity=80); 
} 
.white_content { 
    display: none; 
    position: absolute; 
    top: 25%; 
    left: 25%; 
    width: 50%; 
    height: 50%; 
    padding: 16px; 
    border: 16px solid orange; 
    background-color: white; 
    z-index:1002; 
    overflow: auto; 
} 

感謝。

Answer 1

控制檯上寫着：

Uncaught TypeError: Cannot read property 'style' of null

你的代碼看

getElementById(' fade'). 
       ^^ 

學習使用開發者控制檯，所以你能找到這些錯別字。

.black_overlay { 
 
    display: none; 
 
    position: absolute; 
 
    top: 0%; 
 
    left: 0%; 
 
    width: 100%; 
 
    height: 100%; 
 
    background-color: black; 
 
    z-index: 1001; 
 
    -moz-opacity: 0.8; 
 
    opacity: .80; 
 
    filter: alpha(opacity=80); 
 
} 
 
.white_content { 
 
    display: none; 
 
    position: absolute; 
 
    top: 25%; 
 
    left: 25%; 
 
    width: 50%; 
 
    height: 50%; 
 
    padding: 16px; 
 
    border: 16px solid orange; 
 
    background-color: white; 
 
    z-index: 1002; 
 
    overflow: auto; 
 
}

<section id="XXX"> 
 
    <div id="light" class="white_content">This is the lightbox content. <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='none';document.getElementById('fade').style.display='none'">Close</a> 
 
    </div> 
 
    <div id="fade" class="black_overlay"></div> 
 

 

 
    <a href="javascript:void(0)" onclick="document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block'"> 
 
    <img src="Image.jpg" alt="Image" height="256" width="300"> 
 
    </a> 
 

 
</section>