Question

我使用javascript和css创建了一个弹出窗口/灯箱，它由一个覆盖整个屏幕的褪色div顶部的div组成。当用户点击位于iframe中的广告时，会显示此弹出窗口/灯箱，并且应该接管整个屏幕。

我的问题是，当您点击的广告位于另一个网页上的iframe中时，我无法理解如何实现这一目标。它只会在与您点击的广告相同的容器中打开，并且不会覆盖整个屏幕。

基本上html看起来有点像这样：

<div id="light" style="display:none;">
    <div id="wrap" style="display:none;">
        <section id="container" style="background-color:#fff;">
          <div id="ad_splash">
            <figure class="ftn">
                <div class="mno"></div>
                <a href="destinationurl" target="_top"><img src="splash.png"></a>
          </div>
        </section>
    </div>
</div>

<div id="fade" onclick="lightbox_close();" style="display: none;">
</div>

和js：

<script type="text/javascript">     
    var wsLight = document.getElementById("light");
    var wsFade = document.getElementById("fade");

    window.top.document.body.appendChild(wsLight);
    window.top.document.body.appendChild(wsFade);

    function lightbox_open(){
        window.scrollTo(0,0);
        wsLight.style.display="block";
        wsFade.style.display="block";   
    }
    function lightbox_close(){
        wsLight.style.display="none";
        wsFade.style.display="none";    
    }
</script>

已尝试过设置z-index，target = _top等基础知识，但显然没有运气。我不知道将代码片段，函数或类似内容放在什么位置以及将其附加到主页面的主体（如果它位于iframe中）。正在考虑像window.top.document.body.appendChild(lightbox);之类的东西，但我无法让它发挥作用。我是一个初学者，并没有发现任何能够清楚地解释我做错了什么或者我能做些什么的东西。我在这里找到了一个有类似问题的人，但自2009年以来没有任何答案......我很乐意收到任何反馈。

从主页顶部的iframe打开div（填满整个屏幕）

0 个答案: