JQueryでオーバーレイとモーダルウィンドウを作ってみよう!

jquery_log
Pocket

ボタンをクリックしたとき、画面の背景を薄暗くするにはどうやって作ればいいのか。ふわっと浮かび上がってくるウィンドウはどうやって作ればいいのか。WebサイトやWebアプリケーションを作る際に必要な技術ですが、なかなか覚えることが難しいかと思います。

本記事では、JQueryを使ってオーバーレイとモーダルウィンドウの作り方を紹介します。
画面の背景を薄暗くする動作をオーバーレイと言い、別ウィンドウとして浮かび上がってくる動作をモーダルウィンドウと言います。

オーバーレイ/モーダルウィンドウを作るために必要な条件を理解した後、HTML、CSS、Javascriptのコードを解説しながら、作っていきましょう

スポンサーリンク

オーバーレイとモーダルウィンドウとは

まず、各言葉の意味を確認しておきましょう。

オーバーレイ
何かの表面を薄く覆うこと
モーダルウィンドウ
新しく子ウィンドウを生成し、親ウィンドウの操作を制御不能とする

オーバーレイはイラストでよく使われる言葉であり、レイヤーを重ねる意味として使います。Web系では、HTML要素の上に要素を重ねる意味として使います。

モーダルウィンドウは親ウィンドウに対して、子ウィンドウを生成することです。また、子ウィンドウの制御が終わるまでは、親ウィンドウの制御を使えないようにします。

そのため、オーバーレイとモーダルウィンドウを組み合わせることにより、子ウィンドウが表示されている間は画面の背景を薄暗くし、親ウィンドウは使えないと示すことができます。

オーバーレイ/モーダルウィンドウの実装方法

それでは、具体的に実装する方法を見ていきましょう。主にCSSで設定が必要であり、イベント処理をJQueryで行います。

実装に必要な条件

  • CSSでHTML要素を非表示にする
  • CSSでHTML要素のスタックレベルを指定する

オーバーレイ/モーダルウィンドウはHTML要素を重ねて表現します。そのため、最初は対象のHTML要素を非表示にし、イベント処理で表示します。

スタックレベルとは、要素の重なる順番を表すものです。スタックレベルを指定することにより、メインのHTML要素の上にオーバーレイ/モーダルウィンドウの要素を表示することができます。

CSSでHTML要素を非表示にする

CSSの「display」プロパティを使います。値に「none」を指定することにより、対象のHTML要素を非表示にすることができます。

CSSプロパティ
display: none
設定箇所
オーバーレイ/モーダルウィンドウのHTML要素

CSSでHTML要素のスタックレベルを指定する

CSSの「z-index」プロパティを使います。スタックレベルの値が高い程、HTML要素の前面に表示されます。そのため、以下の順番でスタックレベルの値を決めていきます。

CSSプロパティ
z-index: [値]
z-indexの設定値
「メインのHTML要素」<「オーバーレイのHTML要素」<「モーダルウィンドウのHTML要素」

「メインのHTML要素」は正式にはルートスタックコンテキストと言い、「オーバーレイ/モーダルウィンドウのHTML要素」はローカルスタックコンテキストと言います。また、ローカルスタックコンテキストはルートスタックコンテキストの上に表示されます。

つまり、「position が static 以外」かつ「z-index が auto 以外」にすると、ローカルスタックコンテキストの扱いになりますので、ルートスタックコンテキストの上に表示することができます。

イベント処理でHTML要素を表示/非表示にする

今回はJQueryのイベント処理を使います。「on」メソッドでイベント処理を行い、「fadeIn」「fadeOut」メソッドでHTML要素を表示/非表示にします。

イベント処理
[セレクタ].on([イベント], function() {…})
HTML要素を表示
fadeIn([speed], [callback])
HTML要素を非表示
fadeOut([speed], [callback])

例えば、ボタンをクリックしたときにイベント処理を行いたい場合は、「click」イベントを使います。他にもマウスオーバーしたときは「mouseover」など、目的に合わせてイベントを決めます。

また、fadeIn/fadeOutの第1引数に秒数(ミリ秒)を設定すると、HTML要素を表示/非表示にする速度を変えることができます。デフォルトは4000ミリ秒ですので、早くしたい場合は、1000ミリ秒などにします。

モーダルウィンドウを画面中央に配置する

これは必須ではないですが、モーダルウィンドウを適切な場所に配置することは重要です。今回はどのウィンドウサイズでも中央に配置するようにします。イベント処理と同じく、JQueryで実装してみます。

まず、モーダルウィンドウを画面中央に配置するにはどうすればいいかを確認しておきましょう。

画面中央にウィンドウを配置するには、ウィンドウサイズを計算する必要があります。ウィンドウサイズからモーダルウィンドウサイズを引き、引いた値を2で割ります。割った値をCSSのleftやtopに設定すると、画面中央に配置することができます。

モーダルウィンドウの配置場所を計算
(ウィンドウサイズ(縦・横) - モーダルウィンドウサイズ(縦・横)) / 2

また、JQueryでの実装は以下の順番で実装していきます。

  1. 縦・横のウィンドウサイズを取得する
  2. 縦・横のモーダルウィンドウサイズを取得する
  3. モーダルウィンドウのleft(right), top(bottom)に計算した配置場所を設定する

オーバーレイ/モーダルウィンドウを作ってみよう

それでは、オーバーレイ/モーダルウィンドウがどういう風に作るかがわかってきたと思いますので、実際に作っていきましょう。

「on」メソッドの「click」イベントにより、ボタンクリック時に「fadeIn」メソッドを使い、HTML要素を表示します。その後、モーダルウィンドウ内のボタンクリック時に「fadeOut」メソッドでHTML要素を非表示にします。

完成コード

先に完成コードをお見せします。「Open」ボタンをクリックすると、オーバーレイ/モーダルウィンドウが表示され、「Close」ボタンをクリックすると、オーバーレイ/モーダルウィンドウが非表示になります。

See the Pen xrPZRx by Yuitoku (@yuitoku) on CodePen.

HTMLを作成する

必須なHTML要素は「オーバーレイを表示するHTML要素」「モーダルウィンドウを表示するHTML要素」の2つです。あとは、JQueryのイベントを処理するためにボタンなどを作成しましょう。

<p>「Open」をクリックすると、オーバーレイ/モーダルウィンドウを表示します。</p>
<button id="open">Open</button>
<div id="overlay"></div>  
<div id="modalWindow">  
  <p>「Close」をクリックすると、オーレ―バイ/モーダルウィンドウを非表示にします。</p>
  <button id="close">Close</button>
</div>

CSSを作成する

必須なCSSプロパティは「display: none;」「z-index: [値]」の2つです。他のCSSプロパティで、「全画面表示」や「背景を半透明」などを設定しています。

#overlay {
  /* viewpointを相対位置にし、全画面表示にする */
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);  /* 背景を半透明にする */
  display: none;  /* HTML要素を非表示にする */
  z-index: 1  /* 「メインのHTML要素」よりもスタックレベルを高くする */
 }

#modalWindow {
  width: 350px;
  height: 150px;
  position: fixed; /* viewpointを相対位置にする */
  border: 2px solid #D04255;
  background-color: #FFF;
  display: none; 
  z-index: 2  /* 「オーバーレのHTML要素」よりもスタックレベルを高くする */
}

body {
  text-align: center;
}

button {
  width: 100px;
  height: 50px;
  font-size: 1.2em;
  color: #D04255;
  background-color: #FFF;
  border: solid 2px #D04255;
  border-radius: 3px;
  transition: .4s;
}

button:hover {
  background: #D04255;
  color: #FFF;
}

Javascriptを作成する

オーバーレイ/モーダルウィンドウの実装方法で確認しました通り、各イベント処理、モーダルウィンドウを中央配置するための処理を実装します。ウィンドウのリサイズに対応するため、「resize」メソッドを使い、モーダルウィンドウの配置場所を計算するlocateCenter関数を呼び出しています。

$(function() {
  // 「Open」ボタンをクリック時に、fadeInメソッドでHTML要素を表示する
  $('#open').on('click', function() {
    $('#overlay, #modalWindow').fadeIn();
  });
  
  // 「Close」ボタンをクリック時に、fadeOutメソッドでHTML要素を非表示にする
  $('#close').on('click', function() {
    $('#overlay, #modalWindow').fadeOut();
  });
  
  locateCenter();  // => モーダルウィンドウを中央配置するための初期値を設定する
  $(window).resize(locateCenter);  // => ウィンドウのリサイズに合わせて、モーダルウィンドウの配置を変える

// モーダルウィンドウを中央配置するための配置場所を計算する関数
  function locateCenter() {
    let w = $(window).width();
    let h = $(window).height();
    
    let cw = $('#modalWindow').outerWidth();
    let ch = $('#modalWindow').outerHeight();
   
    $('#modalWindow').css({
      'left': ((w - cw) / 2) + 'px',
      'top': ((h - ch) / 2) + 'px'
    });
  }
});

動作を確認してみよう

「Open」ボタンをクリックすると、背景が薄暗い半透明になり、モーダルウィンドウが表示されることを確認しましょう。その後、「Close」ボタンをクリックすると、背景が元の表示に戻り、モーダルウィンドウを閉じることができれば、問題なく動作しています。

もし、上手く動作しない場合は完成コードを参考に作ってみましょう。

スポンサーリンク

feedly、RSSをフォローする