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

2020年5月13日システムJavaScript,プログラミング初心者

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

どうも、UT(@ut_1029)です。

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

モーダルウィンドウとは

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

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

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

JavaScriptCSSモーダルウィンドウを表示するサンプルコードを紹介します。

<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>

JavaScriptでモーダルウィンドウを表示を解説

JavaScriptCSSモーダルウィンドウを表示するサンプルコードの解説をします。

HTML部分

HTML部分の解説です。

文字コードを指定

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

<meta charset="utf-8">

Webページ文字化けする原因は、大体がmetaタグ文字コードを指定出来ていない事が多いです。

モーダル表示用のボタン

モーダルウィンドウを表示する為のボタンを用意します。
(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で読み込む

JQueryCDNで読み込むようにしました。

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

Content Delivery Networkの略です。
簡単に言うと、リソース(CSSJQueryなど)を自サーバへ用意せず、外部サーバから取得する仕組みです。
リソースを配信する外部サーバは、最適化されたネットワークでリソースを配信します。

CSS部分

CSS部分の解説です。

テキストをセンタリング

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

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;
}
CSSのポイント

  • 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;
}
CSSのポイント

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

JavaScript部分

JavaScript部分の解説です。

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

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

$(document).ready(function () {

});

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

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

 $('.btnModalShow').click(function () {

});

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

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

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

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

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

$('.btnModalClose').click(function () {

});

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

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

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

おわり

今回はJavaScriptCSSモーダルウィンドウを表示するサンプルコードのプログラミング解説をしました。

プログラミング解説講座

UT
UTの日常

当ブログ(UTの日常)を運営しているUTは「プログラミング関係の仕事をしている30代1児の父親」です。詳しくは「UTのプロフィール」をご覧ください。

UTの日常では、システム開発における LinuxPHPJavaScriptJQueryMySQLなどの知識やプログラミング技術、サーバ構築や運用などAWSをメインに知識を紹介しています。

内容としては、Webシステムの開発中や運用中に発生したトラブルやエラーの対応や解決方法をまとめた備忘録やWebシステム開発の方法を未経験者の人を対象に説明したプログラム教科書を記事にしています。
Webシステム開発の知識やプログラム技術の備忘録

2020年5月13日システムJavaScript,プログラミング初心者

Posted by UT