何秒、何分おきにボックス（iframeでもよい）を表示させるjQuery。
動画サイトとかで、動画の中央に表示される広告みたいなのをイメージ。
こちらを参考にさせていただきました。
さくっと簡単！jQueryでコンテンツをオーバーレイ表示させる方法
http://liginc.co.jp/web/js/jquery/39777
【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。
http://on-ze.com/archives/341
HTML
|
1 2 3 4 5 |
<div class="box"> <div id="modalwin"><iframe src="ad.html" frameborder="0" style="width:300px; height:250px;"></iframe> <div id="close">×</div> </div> </div> |
CSS
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
.box { position: relative; margin: 0 auto; width: 718px; } .box #modalwin { position: absolute; top: 50%; left: 50%; margin-top: -125px; margin-left: -150px; width: 300px; height: 250px; z-index: 1000; } .box #close { position: absolute; top: -15px; right: -15px; width: 30px; height: 30px; background: #000; border: 2px solid #fff; border-radius: 15px; color: #fff; text-align: center; line-height: 30px; cursor: pointer; z-index: 1001; } |
.boxサイズ W718px、H438px、
#modalwin W300px H250px
#modalwin,#closeのz-indexは必要かどうかは不明。
jQuery
|
1 2 3 4 5 6 7 8 |
$(function() { setInterval(function(){ $("#modalwin").fadeIn(); },10000); $("#close").click(function() { $("#modalwin").fadeOut(); }); }); |
この場合は、10秒間隔でボックス#modalwinを表示させています。
jQueryの読み込みも忘れずに
|
1 2 3 4 |
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> !window.jQuery && document.write('<script src="js/vendor/jquery-1.11.3.min.js"><\/script>'); </script> |
こっちでもいい
|
1 2 3 4 |
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script> window.jQuery || document.write(‘<script src="js/jquery-1.11.3.min.js"><\/script>’) </script> |
