Question

我有一个页面，我想用弹出窗口显示div叠加层。基本上就像彩盒一样。但我希望这是永久性的。他们不应该能够点击div。 div内部应该是来自ifs中popsurvey.com的内容。我需要框架的链接是这个 - ＆gt; 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％的时间它是相当多余的使用更大的插件或预建解决方案。

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

如何将包含iframe的div与外部源重叠？

1 个答案: