jQueryでのモーダルウィンドウの実装方法【現役エンジニアが解説】

PROGRAM

今回は、jQueryでのモーダルウィンドウの実装方法について、簡単に解説していきます。

HTML

jQueryでもモーダルウィンドウを実装できます。

以下のコードは、今回のHTMLのサンプルになります。

<button type="button" onclick="openModalWindow();">開く</button>
<div id="overlay">
  <div id="modalWindow">
    <button type="button" onclick="closeModalWindow();">閉じる</button>
  </div>
</div>

上記のコードでは、モーダルウィンドウを開くボタンと、閉じるボタンを含むモーダルウィンドウ、さらにそれを囲うオーバーレイの要素を配置しています。

CSS

CSSのサンプルを以下に示します。

#overlay {
    z-index: 1;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none;
    align-items: center;
    justify-content: center;
}
#modalWindow {
    z-index: 2;
    width: 500px;
    height: 250px;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
}

上記の例では、主にオーバーレイ表示の設定をしています。

最初はオーバーレイ表示をオフにするため、overlayのidの要素のdisplayプロパティの値をnoneにしておきます。

jQuery

jQueryのサンプルは下記のとおりです。

function openModalWindow(){
  $('#overlay').css('display', 'flex');
}
function closeModalWindow(){
  $('#overlay').hide();
}

ここではモーダルウィンドウを開くボタンと閉じるボタンを押下した際に呼ぶ関数を定義します。

閉じる際はhideメソッドで簡単に実現できますが、開く場合はdisplayプロパティの値をflexにしたいため、今回はshowメソッドではなくcssメソッドで対応しています。