Bootstrapを使って簡単にモーダルウィンドウを作る方法とは?

皆さんは、Bootstrapを使ったことがありますか?WEBアプリ・WEBサービスなどの画面を作るときに、Bootstrapの使い方を知っているととても便利です。

Bootstrapを使えば、簡単にモーダルウィンドウを作ることができるので、使い方を覚えておくのがおすすめです!そこで今回は、

  • モーダルウィンドウとは?
  • Bootstrapでモーダルを使う方法
  • モーダルの表示をカスタマイズする方法
  • モーダルウィンドウをさらに使いこなすためのフォームとは?

といったように、基礎的なことから応用的な方法まで、徹底的に解説します!

モーダルウィンドウとは?

はじめに、モーダルウィンドウについて簡単に解説します。モーダルウィンドウとは、ボタン・リンクなどをクリックしたときに表示するポップアップ画面のことです。たとえば、次のようなケースで使います。

  • 削除ボタンクリック時の確認メッセージ
  • 詳細ボタンクリック時に詳細画面をモーダルウィンドウで開くとき
  • 画像のポップアップ表示をしたいとき

削除確認画面のモーダルウィンドウ:

Bootstrapだけで簡単にモーダルウィンドウを開くことができるので、使い方を覚えておくのがおすすめです!

Bootstrapでモーダルウィンドウを使う方法

次に、Bootstrapでモーダルウィンドウを使う方法を解説します。

モーダルウィンドウの基本的な作り方

まず、モーダルウィンドウの基本的な作り方について解説します。言葉だとわかりづらいので、サンプルコードを用意しました。

サンプルコード:

<!doctype html>
<html lang="ja">

<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.4.2/css/all.css" integrity="sha384-/rXc/GQVaYpyDdyxK+ecHPVYJSN9bmVFBvjA/9eOB+pb3F2w2N6fc5qB9Ew5yIns" crossorigin="anonymous">
</head>

<body>
    <!-- モーダルを開くボタン・リンク -->
    <div class="container">
        <div class="row my-3">
            <h1>モーダルを開く</h1>
        </div>
        <div class="row mb-5">
            <div class="col-2">
                <button type="button" class="btn btn-primary mb-12" data-toggle="modal" data-target="#testModal">ボタンで開く</button>
            </div>
            <div class="col-2">
                <a class="btn btn-primary" data-toggle="modal" data-target="#testModal">リンクボタンで開く</a>
            </div>
        </div>
    </div>

    <!-- ボタン・リンククリック後に表示される画面の内容 -->
    <div class="modal fade" id="testModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-header">
                    <h4>class="modal-title" id="myModalLabel">削除確認画面</h4></h4>
                </div>
                <div class="modal-body">
                    <label>データを削除しますか?</label>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
                    <button type="button" class="btn btn-danger">削除</button>
                </div>
            </div>
        </div>
    </div>

    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
</body>

</html>

ボタン・リンククリック後の結果:

ボタン・リンククリック時にモーダルウィンドウを開くために、以下のようなコードを書いています。

<button type="button" class="btn btn-primary mb-8" data-toggle="modal" data-target="#testModal">ボタンで開く</button>
<a class="btn btn-primary" data-toggle="modal" data-target="#testModal">リンクボタンで開く</a>

「data-toggle="modal" data-target="#testModal"」を書くことで、「testModal」というid名のモーダルウィンドウを表示することができます。続けて、クリック後に表示する画面の内容を以下のコードで書いています。

<div class="modal fade" id="testModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4><div class="modal-title" id="myModalLabel">削除確認画面</div></h4>
            </div>
            <div class="modal-body">
                <label>データを削除しますか?</label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button>
                <button type="button" class="btn btn-danger">削除</button>
            </div>
        </div>
    </div>
</div>

「<div class="modal fade" id="testModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">」とかくことで、クリックしたときに表示するモーダルを指定しています。

divタグ内の「modal-dialog」→「modal-content」以下にあるdivタグで、それぞれヘッダ、内容、フッダーを設定できます。

  • 「modal-header」で画面名やタイトルを書くヘッダー部分
  • 「modal-body」で詳細な内容を書くボディ部分
  • 「modal-footer」でボタンなど置くフッター部分

書き方をすべて覚えようとすると難しく感じるかもしれませんが、上記サンプルコードをモーダルウィンドウを使う型として使い、「id名で指定したモーダルが開けること」「上記3つのdivをかきかえれば表示内容を変えられること」を覚えて変更できるようにしておけばOKです!

背景を目立たせなくする方法

次に、背景を目立たせなくする方法について解説します。クリックするボタンやリンクにbackdropオプションを追加することで、モーダルウィンドウ表示時の背景の明るさ・背景クリック時の動きを変更することができます。

backdropオプションの使い方:

data-backdrop="値"

値と効果一覧:

  • true :背景を目立たなくし、背景クリックでモーダルを閉じる
  • false:背景をそのままにし、背景クリックしてもモーダルは閉じない
  • static:背景を目立たなくし、背景クリックしてもモーダルは閉じない

先ほどのサンプルに、falseを指定しする場合は以下を変更します。


リンクボタンで開く



リンクボタンで開く

クリック後の画面:

このように、背景の明るさや・背景クリック時の動きを変更することができるので、おぼえておくのがおすすめです!

モーダルウィンドウをさらに使いこなすためのフォームとは?

ここまでのサンプルでは、削除確認メッセージをメインに解説してきましたが、更におすすめな使い方として、モーダルウィンドウを詳細データの入力画面として利用する方法があります。

たとえば、次のような一覧画面の詳細ボタンをクリックしてから、詳細データを入力するようなケースです。

このように、「モーダルウィンドウ + フォーム」を使えばWEBアプリ・WEBサービス開発の幅が広がるので、合わせて覚えておくのがおすすめです!以下で詳しく解説しているので、気になる方は見てみて下さいね!

【Bootstrap超入門】フォームの種類・使い方について徹底解説!
更新日 : 2020年6月19日

まとめ

今回は、Bootstrapでモーダルウィンドウを作る方法について解説しました。削除機能・詳細画面の表示・画像のポップアップ表示などが簡単に作れるので、覚えておくと便利です!使い方も簡単なので、ぜひ使ってみてくださいね!

LINEで送る
Pocket

ITエンジニアへ転職したい方におすすめ

自分を評価してくれる企業に転職して年収を上げたい! 自分のスキルにあった独自案件を知りたい!
エンジニアは今もっとも注目されている職業の1つ。エンジニアになって年収を増やしたい方や、あなたのスキルに見合った企業へ転職したいエンジニアの方も多いですよね。

しかし、大手の転職媒体は扱う求人数が多くても、誰もが登録しているので競争率もかなり高くなっています。そのため、あなたの条件に見合った企業を見つけても転職するためには、相応の努力とスキルが必要となります。

こういった媒体では、未経験からエンジニアを目指す方やエンジニア歴2〜3年で転職を考えている方にとって、最適な転職環境とはいえません。

そこでオススメしたいのが、未経験者や若手エンジニア向けの独自案件を多く掲載している「侍ワークス」です。

侍ワークスは、独自案件を多く掲載しているだけでなく、

・応募から就業まで一貫したサポート

・就業後もアフターフォロー

といった経験の浅い方や初めてエンジニアを目指す方にも安心のフォロー体制が整っています。もちろん登録は完全無料!しかも案件を見るだけなら登録も不要です。

まずは、お気軽にどんな求人があるか見てみてください。あなたにピッタリの企業がきっと見つかりますよ! 侍ワークスの求人情報を見る

書いた人

Sanshiro Wakizaka

Sanshiro Wakizaka

新卒入社したメーカー系のIT企業で、システムエンジニアとして約5年勤務。
Webアプリ、業務アプリ開発において、要件定義、設計、インフラ、製造、テスト、運用保守など、様々な経験あり。
また、侍ブログ編集部として、これまでに200記事以上の記事を執筆。
現在はフリーランスエンジニア兼テックライターとして活動中。