一定時間おきにボックスを表示させるjQuery



何秒、何分おきにボックス(iframeでもよい)を表示させるjQuery。
動画サイトとかで、動画の中央に表示される広告みたいなのをイメージ。
一定時間でボックスを表示させる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>

シェアする

  • このエントリーをはてなブックマークに追加

フォローする