クーポンの表示サンプル

クーポンを全画面表示し、画面を再度タップしたら全画面を終了するサンプルコードです。jQueryを利用しています。

HTML

<!-- クーポンの表示 -->
<div class="coupon">
  <img src="https://placehold.jp/150x150.png">
</div>

CSS

/* クーポンのスタイル */
.coupon {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
  display: none;
  justify-content: center;
  align-items: center;
}
.coupon img {
  max-width: 90%;
  max-height: 90%;
}

/* タップ時のアニメーション */
.coupon.active {
  animation: pulse 0.5s;
}
@keyframes pulse {
  0% {transform: scale(1);}
  50% {transform: scale(1.1);}
  100% {transform: scale(1);}
}

jQuery

// クーポンのクリックイベントを追加
$('.coupon').on('click', function() {
  // クーポンを表示
  $(this).addClass('active').fadeIn();
});

// クーポンを非表示にする関数
function closeCoupon() {
  $('.coupon').removeClass('active').fadeOut();
}

// クーポン以外をタップしたらクーポンを非表示にする
$(document).on('click touchend', function(e) {
  if (!$('.coupon').is(e.target) && $('.coupon').has(e.target).length === 0) {
    closeCoupon();
  }
});

// クーポン画面をタップしたら非表示にする
$('.coupon').on('click touchend', function() {
  closeCoupon();
});

上記のコードでは、まずクーポンを非表示にしておき、クリックするとクーポンを全画面表示します。また、クーポン以外をタップした場合、もしくはクーポン画面を再度タップした場合には、クーポンを非表示にします。アニメーションを追加することで、クーポンがタップされた時に強調表示されるようにしています。