如何用外部源覆盖包含 iframe 的 div

Question

>我有一个页面，我想显示一个带有弹出窗口的div覆盖层。基本上，就像彩盒一样。但我希望这是永久性的。他们应该无法点击离开div。div 的内部应该是 iframe 中 popsurvey.com 的内容。我需要框架的链接是这个 -> http://www.popsurvey.com/s/5gzmqc/0x5513 - 你建议如何做到这一点？谢谢。

 <script>
$(document).ready(function() {
$.colorbox({iframe:true, width:"620", height:"591", href:"http://www.popsurvey.com/s/5gzmqc/4zk4lm?embed=true", opacity: ".3"});
});
 </script>

Answer 1

我在jquery中创建了一个解决方案，它足够轻巧和简单，可以满足您的需求（我希望），干净和简单通常是做这些事情的最佳方式，99.99%的情况下，使用更大的插件或预构建的解决方案是多余的。

• JSFIDDLE 演示

• 斯菲德尔

---

该网页：

   <div id="block"></div>
<div id="iframecontainer">
    <div id="loader"></div>
    <iframe></iframe>
</div>​

该 css：

#iframecontainer {width:90%; height: 90%; display: none; position: fixed;margin-top: 5%; margin-left: 5%; background:#FFF; border: 1px solid #666;border: 1px solid #555;box-shadow: 2px 2px 40px #222;z-index: 999999;}
#iframecontainer iframe {display:none; width: 100%; height: 100%; position: absolute; border: none; }
#loader {background: url('http://www.calgaryramsrugby.com/images/ajax-loader.gif');background-repeat:no-repeat;  width: 250px; height: 250px; margin:auto;}
#block {background: #000; opacity:0.6;  position: fixed; width: 100%; height: 100%; top:0; left:0; display:none;}​

js：

$(document).ready(function() {
    $('#block').fadeIn();
    $('#iframecontainer').fadeIn();
    $('#iframecontainer iframe').attr('src', 'http://www.popsurvey.com/s/5gzmqc/0x5513');
    $('#iframecontainer iframe').load(function() {
        $('#loader').fadeOut(function() {
            $('iframe').fadeIn();
        });
    });
});

​

​