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

Question

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

Answer 1

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,但都是让它两隐藏,
既然同显示同隐藏,那么每次都是下面那个把上面遮了.