Javascript 按下按钮前的叠加显示

我有一个网页，其中包含一个按钮，该按钮切换功能toggleOverlay，该功能显示覆盖，以及可以关闭覆盖。覆盖是一个div。在div中，我嵌套了一个iFrame，它引用了我拥有的另一个本地html文件并显示它。然而，我能使iFrame显示本地html文件的唯一方法是在CSS中去掉属性display:none。但是该函数依赖于该属性来确定覆盖是否显示。我该如何解决这个问题，因为从当前开始，当页面第一次加载时会显示overlay div

目前

当页面首次加载时，将显示覆盖 显示：没有从css中删除任何内容，以允许iFrame实际显示本地html文件 目标

使iframe能够继续显示本地html文件 修改该功能，以便在首次加载页面时，而不是在按下按钮时，覆盖显示。 HTML

Javascript

您在哪里有显示器：无？它在电视台上吗？ID覆盖的HTML元素在哪里？@NicklasNygren显示：divspecialBox中没有。ID为overlay的HTML元素与div特殊框位于同一文件中。

<div id="specialBox">
  <iframe src="SlideOne.html" width="100%" height="100%"></iframe>
  <button onmousedown="toggleOverlay()">Close Overlay</button>
</div>

div#specialBox {
    position: relative;
    z-index: 3;
    margin: 150px auto 0px auto;
    width: 500px; 
    height: 300px;
    background: #FFF;
    color: #000;
}

function toggleOverlay(){
    var overlay = document.getElementById('overlay');
    var specialBox = document.getElementById('specialBox');
    overlay.style.opacity = .8;
    if(overlay.style.display == "block"){
        overlay.style.display = "none";
        specialBox.style.display = "none";
    } else {
        overlay.style.display = "block";
        specialBox.style.display = "block";
    }
}