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

今回は、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のサンプルを以下に示します。