CSSとjQueryで全画面オーバーレイ

2021/11/15 フロント

こんにちは、さるまりんです。

HTMLでページを作っていて、ある操作の途中に他の操作をさせないように画面全体を覆ってしまいたいことありますよね。

そうです、オーバーレイです。

HTML/CSS/jQuery(JavaScript)でこんな風に実装してみました。

↓の「隠す！」ボタンを押すと、全画面オーバーレイでこのページを覆ってくれます。

HTML (「隠す！」ボタン)

<button class="show-overlay">隠す！</button>

HTML (オーバーレイ部分)

<div id="full-overlay">
  <div class="inner">
  <p>隠してます！</p>
  <button class="close-overlay">みる？</button>
  </div>
</div>

CSS

#full-overlay{
  position: fixed;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background: rgba(100, 100, 100, .5);
  display: none;
  z-index: 999;
}
  
#full-overlay .inner{
  position: fixed;
  left: 50%; top: 50%;
  width: 100%;
  transform: translate(-50%, -50%);
  color: rgba(252, 235, 90, 1);
  text-align: center;
}

#full-overlayでは幅、高さ共に100%にして、背景をグレーで透かして表示します。display: none;を指定しているのはこの部分は初期状態では非表示だからです。z-indexで重なりを指定するのですが、値の大きなものが手前に表示されます。ここでは十分大きな値として999を指定しています。この値は32ビット整数なので指定できる最大値は231-1=2,147,483,647です。

#full-overlay .innerではオーバーレイ内に表示されている文字とボタンを中央に表示するように指定しています。文字の色はこのヘッダーにあるバナナと同じ色です。

jQuery (JavaScript)

$(function() {
  // 「隠す！」ボタンクリック
  $(".show-overlay").on('click', function() {
    $("#full-overlay").fadeIn();
  });

  // 「みる？」ボタンクリック
  $(".close-overlay").on('click', function() {
    $("#full-overlay").fadeOut();
  });
});

jQueryでボタンクリック時の動作を書いています。クラスshow-overlayがついているボタンをクリックすることでオーバーレイを表示、クラスclose-overlayがついているボタンをクリックすることでオーバーレイを非表示です。fadeIn()、fadeOut()はjQueryが用意している指定要素を緩やかに表示・非表示する機能です。

HTML/CSS/JavaScript、組み合わせると面白いです。もっと勉強したいです。

ここにも「隠す！」ボタン置いておきます。

読んでくださってありがとうございます。

それではまた！

 

 

隠してます！