前端实现展示弹窗，为什么不同的标签弹出相同的内容？是不是js函数写错了，需要怎么改呢？

<h4 class="title"><a href="JavaScript:void(0)" onclick="openDialog()">Fisrt</a></h4>
<div id="light" class="white_content">
<div class="header">
<h4 class="title">First</h4>
<img id="header-right" href = "javascript:void(0)" onclick = "closeDialog()" src="https://segmentfault.com/q/1010000039012855/img/close-s.png">
</div>
<ul>
<h1>First</h1>
</ul>
</div>
<div id="fade" class="black_overlay"></div>
<h4 class="title"><a href="JavaScript:void(0)" onclick="openDialog()">Second</a></h4>
<div id="light" class="white_content">
<div class="header">
<h4 class="title">Second</h4>
<img id="header-right" href = "javascript:void(0)" onclick = "closeDialog()" src="https://segmentfault.com/q/1010000039012855/img/close-s.png">
</div>
<ul>
<h1>Second</h1>
</ul>
</div>
<div id="fade" class="black_overlay"></div> 

js函数

<script type="text/javascript">
$(function(){
})
function openDialog(){
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
}
function closeDialog(){
document.getElementById('light').style.display='none';
document.getElementById('fade').style.display='none';
}
</script>

回答

html看着有点头疼,就直接看js 了

    document.getElementById('light').style.display='block';
    document.getElementById('fade').style.display='block';

这两句话触发两个不同的dom,但都是让它两显示,

    document.getElementById('light').style.display='none';
    document.getElementById('fade').style.display='none';

这两句话触发两个不同的dom,但都是让它两隐藏,
既然同显示同隐藏,那么每次都是下面那个把上面遮了.