1

ポップアップで 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>
4

1 に答える 1

0

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

</p>

</p>

于 2012-05-01T00:50:02.960 に答える