叠加层无法打开

Question

我的跨度不会打开我的模态。仅当我在CSS文件中的叠加层上使用display:none;时，它才能打开并工作。这意味着当我这样做时，我的模态在我的主屏幕之前打开。我想拥有display:none，因此索引首先打开，然后使用跨度打开模式。在此问题上停留了太长时间。有什么想法吗？

我尝试切换z-index，但无济于事。

function openNav() {
  document.getElementById("nav").style.width = "100%";
}


function closeNav() {
  document.getElementById("nav").style.width = "0%";
}

<!--The Overlay-->

<div Id="nav" class="overlay">



  <!--Button to close the overlay navigation-->

  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">&times;</a>

  <!--overlay content-->

  <div class="overlay-content">

    <a href="#">HOME</a>
    <a href="#">BLOG</a>
    <a href="#">GALLERY</a>
    <a href="#">CONTACT</a>
    <a href="#">ABOUT</a>

  </div>


</div>

<div class="slideshow">



  <div class="slideshowcontent">


    <span style="font-size:60px;cursor:pointer;color:white;" onclick="openNav()">&#9776;</span>


    <h1>TRY AGAIN.</h1>
    <h2>Slowly getting there.</h2>

  </div>


</div>

希望打开模式但什么也没发生。