Question

我有一个网页，其中包含一个按钮，用于切换显示叠加层的函数toggleOverlay，以及关闭叠加层。叠加层是一个div。在div中，我嵌套了iFrame，它引用了我拥有的另一个本地html文件并显示它。但是，我能够使iFrame显示本地html文件的唯一方法是在CSS中我取出属性display:none。但是该功能取决于该属性以确定是否显示叠加层。我该如何解决这个问题，因为当前首次加载页面时会显示叠加div。

目前

首次加载页面时显示叠加
display:none已从css中删除，以允许iFrame实际显示本地html文件

目标

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

HTML

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

CSS

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

的Javascript

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";
    }
}

按下按钮之前显示叠加

0 个答案: