javascript - 如何使用外部源覆盖包含 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 演示

• jsfiddle

---

的HTML：

   <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();
        });
    });
});

​</p>

​</p>