【JavaScript】モーダルダイアログを表示する方法

2021年8月8日 2021年8月9日

こんにちは！CODE CLUB965のKです！

今回はJavaScriptでモーダルダイアログを表示する方法についてサンプルコードを見ながら解説しようと思います。

コードサンプル

まずはソースコードのサンプルから見ていきましょう。

<html>
<head>
    <meta charset="utf-8">
    <title>Modal Dialog</title>
    <style>
        .modal {
            display: none;
            position: absolute;
            text-align: center;
            border: 1px solid #000000;
            background-color: #ffffff;
            padding: 5px;
            margin: auto;
            width: 50%;
            top: 50%;
            bottom: 40%;
            left: 0;
            right: 0;
            z-index: 2;
        }
        .overlay {
            display: none;
            position: fixed;
            width: 100%;
            height: 120%;
            background-color: #000000;
            opacity: 0.65;
            top: 0;
            left: 0;
            z-index: 1;
        }
    </style>
</head>
<body>
    <button type="button" class="showModal">モーダルダイアログ表示</button>
    <div class="modal">
        <h2>モーダルダイアログ</h2>
        <p>これはモーダルダイアログです。</p>
        <button type="button" class="closeModal">閉じる</button>
    </div>
    <div class="overlay"></div>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        $(document).ready(function () {
            $('.showModal').click(function () {
                $('.modal').show();
                $('.overlay').show();
            });
            $('.closeModal').click(function () {
                $('.modal').hide();
                $('.overlay').hide();
            });
        });
    </script>
</body>
</html>

これを実際に実装すると、以下のようにモーダルダイアログを表示することができます。

ボタンをクリックするとモーダルダイアログが表示されます。

Modal Dialog

以下に、簡単に解説しておきます。

JQueryを読み込む

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

JQueryを読み込むための記述です。

JavaScriptでボタンイベントの定義を簡単に行えるようになります。

見た目をカスタマイズする

ダイアログの見た目の部分は、<head>タグの中の

<style>
・・・
</style>

の部分でカスタマイズします。

ダイアログの表示位置や、大きさなどを記述しています。

本来であれば、CSSファイルを別に作成してそこに記述する方がいいです。

ちなみに、「.overlay{ }」の部分は、モーダルを表示した際にモーダル以外の画面の操作をできないようにするためのものです。
オーバーレイといいます。

モーダルに動きを付ける

ここがJavaScriptの部分になります。

scriptタグで囲んでいるところがモーダルを表示させたり、閉じたりするための処理が記述されています。

ポイントは、読み込みが完了した時に処理を実行するように「$(document).ready()」使います。

$(document).ready(function () {
  ・・・
});

この部分ですね。

あとはこの中で、モーダルが表示するための処理と閉じる処理を書いてあげるだけです。

// モーダルを開く
$('.showModal').click(function () {
  $('.modal').show();
  $('.overlay').show();
});

// モーダルを閉じる
$('.closeModal').click(function () {
  $('.modal').hide();
  $('.overlay').hide();
});

ボタンのクリックイベントでモーダルとオーバーレイを表示する（または閉じる）記述をしているだけです。