JavaScriptでモーダルウィンドウ表示プログラム解説【JQuery】

2020年5月13日プログラムJavaScript,プログラムサンプル

【初心者】JavaScriptでモーダル表示するプログラミングを解説【プログラミング初心者の入門講座】
【初心者】JavaScriptでモーダル表示するプログラミングを解説【プログラミング初心者の入門講座】

JavaScriptとCSSでモーダルウィンドウを表示するプログラミングの解説です。

プログラミング歴

この記事を書いている僕は、プログラミング歴10年以上のプログラマーです。
詳細：プログラミング未経験の新卒が10年間プログラマーとして仕事して思うこと

JavaScriptでモーダルウィンドウを表示するサンプルコード

JavaScriptとCSSでモーダルウィンドウを表示するプログラミングの解説をします。

JavaScriptだけではなくCSSの知識が必要になるので、難易度上がりますがチャレンジしてください。

モーダルウィンドウとは

ウィンドウ内で指定された操作(“はい"や"いいえ"、"キャンセル"などのボタン押下など)するまでウィンドウを閉じることが出来ない子ウィンドウです。

モーダルウィンドウ表示で習得できること

  • 子ウィンドウ表示の仕組みが理解できる
  • CSSで子ウィンドウ表示

ぜひチャレンジしてください。

サンプルコード【JavaScriptでモーダル表示】

では、さっそくJavaScriptでモーダルウィンドウ表示のサンプルコードから紹介します。
(基本的にコピペで動くと思います。)

今回はボタンのクリックイベントなどを簡単に行えるように「JQuery」を使っています。

<html>
<head>
    <meta charset="utf-8">
    <title>Modal Window Sample</title>
    <style>
        body {
            text-align: center;
        }
        .modal {
            display: none;
            position: absolute;
            border: 1px solid #000000;
            background-color: #ffffff;
            padding: 5px;
            margin: auto;
            width: 50%;
            top: 0;
            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>
    <h1>Modal Window Sample</h1>
    <p>this is main contents.</p>
    <button type="button" class="btnModalShow">Modal Show</button>
    <div class="modal">
        <h2>Modal Window</h2>
        <p>this is modal window.</p>
        <button type="button" class="btnModalClose">Modal Close</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 () {
            $('.btnModalShow').click(function () {
                $('.modal').show();
                $('.overlay').show();
            });
            $('.btnModalClose').click(function () {
                $('.modal').hide();
                $('.overlay').hide();
            });
        });
    </script>
</body>
</html>

HTML部分の解説【JavaScriptでモーダル表示】

JavaScriptでモーダルウィンドウ表示のサンプルコードのHTML部分から解説をします。

HTMLは比較的シンプルです。

文字コードを指定

HTMLのheadタグ内にmetaタグでcharset(文字コード)をUTF-8に指定します。

<meta charset="utf-8">
metaタグでcharsetを指定する理由

metaタグでcharset(文字コード)を指定しないとWebページが文字化けする原因となります。

モーダル表示用のボタン

モーダルウィンドウを表示する為のボタンを用意します。
(JavaScriptでボタンのクリックイベントを定義する)

<button type="button" class="btnModalShow">Modal Show</button>

モーダルを作成

モーダルウィンドウを作成します。
(画面に重なって表示するようにCSSでスタイルする)

<div class="modal">
    <h2>Modal Window</h2>
    <p>this is modal window.</p>
    <button type="button" class="btnModalClose">Modal Close</button>
</div>

JQueryをCDNで読み込む

JavaScriptでボタンイベント定義を簡単に行えるようにJQueryを読み込みます。JQueryをCDNで読み込みます。

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

Content Delivery Networkの略です。
リソース(CSSやJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。
簡単にいうと「高速にリソース(CSSやJQuery)を外部サーバから取得できる」って感じです。

CSS部分の解説【JavaScriptでモーダル表示】

JavaScriptでモーダルウィンドウ表示のサンプルコードのCSS部分から解説をします。

モーダル表示はCSSが重要です。

styleタグを用意してスタイルを定義

スタイルを記述するためにstyleタグを記述します。

<style>
・・・
</style>

テキストをセンタリング

テキストをセンタリング表示になるようにスタイルします。

body {
    text-align: center;
}

モーダルをスタイル

class名が’modal’を指定してモーダルウィンドウ用にスタイルをします。

.modal {
    display: none;
    position: absolute;
    border: 1px solid #000000;
    background-color: #ffffff;
    padding: 5px;
    margin: auto;
    width: 50%;
    top: 0;
    left: 0;
    right: 0;
    z-index: 2;
}
  • display: none;
    • 画面表示時は、非表示となるようにしています。
  • position: absolute;
    • 表示位置を調整してモーダルウィンドウとなるようにしています。
  • z-index: 2;
    • 画面の重なり順序を指定しています。(モーダルウィンドウは画面に重なって浮いた状態なので)

オーバーレイをスタイル

モーダル表示時に画面を操作(ボタンクリックとか)出来ないように、1枚画面を重ねます。
(これをオーバーレイといいます。)

.overlay {
    display: none;
    position: fixed;
    width: 100%;
    height: 120%;
    background-color: #000000;
    opacity: 0.65;
    top: 0;
    left: 0;
    z-index: 1;
}
  • display: none;
    • 画面表示時は非表示となるようにします。
  • position: fixed;
    • 表示位置を調整します。
  • height: 120%;
    • スマホ対応で120%にしています。
    • ※スマホだと上下にスクロールした時に出てくるメニューがあるので、それの表示幅の調整のため
  • opacity: 0.65;
    • 画面が見えるように透過にしています。
  • z-index: 1;
    • 画面の重なり順序を指定しています。

JavaScript部分の解説【JavaScriptでモーダル表示】

JavaScriptでモーダルウィンドウを表示するサンプルコードのJavaScript部分から解説をします。

JavaScriptはシンプルでボタンクリックでモーダルを表示するだけです。

scriptタグを用意してJavaScriptのプログラムを始める

JavaScriptでプログラムコードを記述するためにscriptタグを記述します。

<script>
・・・
</script>

読み込み完了で実行させる

読み込み完了時に実行するように「$(document).ready();」と定義します。

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

モーダル表示ボタンのクリックイベントを定義

class名が’btnModalShow’のボタンにクリックイベントを定義します。

$('.btnModalShow').click(function () {
    $('.modal').show();
    $('.overlay').show();
});

モーダル表示とオーバーレイ表示

ボタンのクリックイベントで、モーダルとオーバーレイを表示するようにします。

$('.modal').show();
$('.overlay').show();

モーダルを閉じるボタンのクリックイベントを定義

class名が’btnModalClose’のボタンにクリックイベントを定義します。

$('.btnModalClose').click(function () {
    $('.modal').hide();
    $('.overlay').hide();
});

モーダルとオーバーレイを閉じる

ボタンのクリックイベントで、モーダルとオーバーレイを非表示にします。

$('.modal').hide();
$('.overlay').hide();

まとめ【JavaScriptでモーダルウィンドウ表示プログラム解説】

今回はJavaScriptでモーダルウィンドウを表示するサンプルコードを解説しました。

モーダル表示はJavaScriptよりCSSが複雑でしたが、CSSも理解しておくとフロントエンジニアとして幅が広がります。

最後まで読んでもらいありがとうございます。

【勉強】JavaScriptでモーダル表示(+CSS)【プログラミング初心者の入門講座】#StudyWithMe

＼プログラミングスクール受講メリット／

・メンターにすぐ聞けるので分からないところでつまづかない
・受講生同士で学び合いモチベーション維持しやすい
・就学後に就職支援や進路サポートを受けることが出来る

＼現役エンジニアによるサポート就職支援／
[ TechAcademy ]
の特徴・料金を確認
ユート
ユート

1985年生まれ1児の父親です。Web系エンジニアを10年以上しています。
→プロフィール
→Amazon欲しいものリスト

2020年5月13日プログラムJavaScript,プログラムサンプル

Posted by ユート