ページ離脱時や、遷移した時に出る画面の上下中央に出るバナーのCSS

どうも7noteです。最近よく見かける離脱防止用のバナーの作り方

たとえばこんなやつですね。

これと同じようなものを作ってみます。

どんっ！！

画面いっぱいを暗くして、バナーを表示する方法

index.html

<!-- body直下に設置 -->
<div id="overview">
  <div class="bnr"><img src="sample.png" alt=""><span class="close">×</span></div>
</div>

style.css

#overview {
  width: 100%;       /* 幅いっぱい */
  height: 100vh;     /* 高さいっぱい */
  background: rgba(0, 0, 0, 0.5); /* 背景を薄暗くする */
  display: none;     /* デフォルトは非表示 */
  position: fixed;   /* 表示位置を絶対指定して固定 */
  top: 0;            /* 表示位置を上から0pxに指定 */
  left: 0;           /* 表示位置を左から0pxに指定 */
}

#overview .bnr {
  position: absolute; /* 相対位置とする、かつcloseの基準値になる。 */
  top: 50%;           /* 表示位置を上から50%に指定 */
  left: 50%;          /* 表示位置を左から50%に指定 */
  transform: translate(-50%, -50%); /* 上下中央にするため要素の半分分だけ左上に戻す */
}
#overview .bnr .close {
  font-weight: bold;  /* 太字にする */
  padding: 0 6px;     /* 左右の余白を適当に調整 */
  background: #fff;   /* 背景色を白に指定 */
  position: absolute; /* 相対位置とする */
  top: -28px;         /* いい感じの位置に指定 */
  right: 0px;         /* 同様 */
  cursor: pointer;    /* hover時にカーソルを指の形にする */
}

script.js

/* ページ読み込み完了時にバナーのブロックを表示 */
window.onload = function(){
  $("#overview").show();
}

/* ×ボタンが押されたとき、バナーブロックを非表示 */
$("#overview .close").on("click", function(){
  $("#overview").hide();
});

解説

CSSの解説ですが、ポイントがいくつか。overflowの幅は100vwにしてしまうとpcの縦スクロールバー分の計算をしないといけなくなってしまうので、body直下に設置し、width: 100%;を指定しています。

一番後ろのoverflowに半透明の背景を入れるため16進数での背景指定ではなくbackground: rgba(0, 0, 0, 0.5);と書き、色の透明度で調整。opacityで透明度を指定してしまうと、バナー画像も半透明になってしまうので注意。
詳しくは過去の記事「【初心者でもわかる】cssで使われる透明3種類の使い方」をご覧ください。

あとはバナー画像を上下中央に設置したり、×ボタンをいい感じのところに配置したら完成！
×ボタンは押せることがわかるようにcursor: pointer;を入れておくのがベスト！

まとめ

見た目の体裁についての解説になります。記述しているjsはおまけ程度にお考えください、実運用できるようなレベルのjavascriptではありません。
このままだと、1回バナーを見たユーザーに何度も表示することになりますし、ページリロードする度にバナーが出てくる等、使いにくさが出てくきます。

離脱時（戻るボタンを押したとき）にバナーを出すなどは意外と手間がかかるのでjs初心者の方はあまりお勧めしないかも。。。そういうツールもあるので、ちゃんと運用したいのであればそのようなツールを導入することを検討するといかも

おそまつ！

~ Qiitaで毎日投稿中!! ~
【初心者向け】WEB制作のちょいテク詰め合わせ