何秒、何分おきにボックス(iframeでもよい)を表示させるjQuery。
動画サイトとかで、動画の中央に表示される広告みたいなのをイメージ。
こちらを参考にさせていただきました。
さくっと簡単!jQueryでコンテンツをオーバーレイ表示させる方法
http://liginc.co.jp/web/js/jquery/39777
【jQuery】ほんの少しのコードでページ読み込み時にフェードインのエフェクトを追加する方法。
http://on-ze.com/archives/341
HTML
<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
.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
$(function() { setInterval(function(){ $("#modalwin").fadeIn(); },10000); $("#close").click(function() { $("#modalwin").fadeOut(); }); });
この場合は、10秒間隔でボックス#modalwinを表示させています。
jQueryの読み込みも忘れずに
<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>
こっちでもいい
<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>