Bootstrap modalの使い方を紹介！｜modalを正しく使いこなそう

Bootstrap

HTML・CSS
プログラミング言語

公開日時: 2020-12-02 　更新日時: 2022-06-01

この記事でわかること

システム エンジニア: Bootstrap modalの使い方を教えてください。

プロジェクト マネージャー: Bootstrapでのモーダルダイアログの使い方について説明しますので、一緒に見ていきましょう。

Bootstrapでのmodalの使い方とは？

今回は、Bootstrapでのモーダルダイアログの使い方について説明します。モーダルダイアログとは、ボタンクリックなどで表示されるダイアログウィンドウのことです。

ここでは、モーダルダイアログについて、「基本的な使い方」「フェードイン」「センター表示」「フォーム」の4つを紹介します。

基本的な使い方

Bootstrapでのモーダルダイアログの基本的な使い方を紹介します。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
  Bootstrap modal
</button>
<div class="modal" id="modal1" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalLabelId">modal title</h3>
            </div>
            <div class="modal-body">
                <label>mobal body</label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

Bootstrap modal

</button>

<h3 class="modal-title" id="modalLabelId">modal title</h3>

</div>

<label>mobal body</label>

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

</div>

See the Pen
bootstrap_modal1 by kskumd (@kskumd)
on CodePen.

modal-headerは、タイトルなどを記述するヘッダー部分です。
modal-bodyは、内容を記述するボディ部分です。
modal-footerは、ボタンなどを配置するフッター部分です。

フェードイン

Bootstrapでは、div class=”modal fade”を指定することで、モーダルダイアログがフェードインします。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
  Bootstrap modal fade-in
</button>
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalLabelId">modal title</h3>
            </div>
            <div class="modal-body">
                <label>mobal body</label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

Bootstrap modal fade-in

</button>

<h3 class="modal-title" id="modalLabelId">modal title</h3>

</div>

<label>mobal body</label>

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

</div>

See the Pen
bootstrap_modal2 by kskumd (@kskumd)
on CodePen.

センター表示

Bootstrapでは、modal-dialog-centeredを指定することで、モーダルダイアログをセンターに表示できます。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
  Bootstrap modal center
</button>
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalLabelId">modal title</h3>
            </div>
            <div class="modal-body">
                <label>mobal body</label>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div>
    </div>
</div>

Bootstrap modal center

</button>

<h3 class="modal-title" id="modalLabelId">modal title</h3>

</div>

<label>mobal body</label>

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

</div>

See the Pen
bootstrap_modal3 by kskumd (@kskumd)
on CodePen.

フォーム

Bootstrapでは、モーダルダイアログには、formの要素を記述することもできます。

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">
  Bootstrap modal form
</button>
<div class="modal fade" id="modal1" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h3 class="modal-title" id="modalLabelId">modal title</h3>
            </div>
            <div class="modal-body">
                <form>
                    <div class="form-group">
                        <label for="title-text" class="col-form-label">Title:</label>
                        <input type="text" class="form-control" id="recipient-name">
                    </div>
                    <div class="form-group">
                        <label for="message-text" class="col-form-label">Message:</label>
                        <textarea class="form-control" id="message-text"></textarea>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">Send message</button>
            </div>
        </div>
    </div>
</div>

Bootstrap modal form

</button>

<h3 class="modal-title" id="modalLabelId">modal title</h3>

</div>

<form>

<label for="title-text" class="col-form-label">Title:</label>

</div>

<label for="message-text" class="col-form-label">Message:</label>

</div>

</form>

</div>

<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>

<button type="button" class="btn btn-primary">Send message</button>

</div>

See the Pen
bootstrap_modal4 by kskumd (@kskumd)
on CodePen.

システム エンジニア: Bootstrapでのモーダルダイアログの「基本的な使い方」「フェードイン」などが理解できました。

プロジェクト マネージャー: 使い方が理解できたら、実際にソースコードで指定してみましょう。

Bootstrap modalを正しく使いこなそう

いかがでしたでしょうか。Bootstrapでのモーダルダイアログについて、「基本的な使い方」「フェードイン「センター表示」「フォーム」の4つを紹介しました。

ぜひご自身でソースコードを書いて、理解を深めてください。

FEnet.NETナビ・.NETコラムは株式会社オープンアップシステムが運営しています。

株式会社オープンアップシステムはこんな会社です

秋葉原オフィスには株式会社オープンアップシステムをはじめグループのIT企業が集結！
数多くのエンジニアが集まります。

スマホアプリから業務系システムまで

スマホアプリから業務系システムまで開発案件多数。システムエンジニア・プログラマーとしての多彩なキャリアパスがあります。
充実した研修制度

毎年、IT技術のトレンドや社員の要望に合わせて、カリキュラムを刷新し展開しています。社内講師の丁寧なサポートを受けながら、自分のペースで学ぶことができます。
資格取得を応援

スキルアップしたい社員を応援するために資格取得一時金制度を設けています。受験料(実費)と合わせて資格レベルに合わせた最大10万円の一時金も支給しています。
東証プライム上場企業グループ

オープンアップシステムは東証プライム上場「株式会社オープンアップグループ」のグループ企業です。

安定した経営基盤とグループ間のスムーズな連携でコロナ禍でも安定した雇用を実現させています。

株式会社オープンアップシステムに興味を持った方へ

株式会社オープンアップシステムでは、開発系エンジニア・プログラマを募集しています。

年収をアップしたい！スキルアップしたい！大手の上流案件にチャレンジしたい！
まずは話だけでも聞いてみたい場合もOK。お気軽にご登録ください。

株式会社オープンアップシステムへ応募する
会員登録不要! カンタン45秒!

Bootstrap modalの使い方を紹介！｜modalを正しく使いこなそう

Bootstrapでのmodalの使い方とは？

基本的な使い方

フェードイン

センター表示

フォーム

Bootstrap modalを正しく使いこなそう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

CSS新着案件New Job

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

RedmineプラグインおよびWEB開発/Ruby/東京都中央区/【WEB面談可】/在宅勤務

Webシステム開発/東京都江東区/【WEB面談可】/テレワーク

Webマーケティング施策の運用サポート/CSS/東京都千代田区/【WEB面談可】

空港案内表示画面開発/HTML/神奈川県鎌倉市/【WEB面談可】

空港案内表示画面の運用保守/HTML/神奈川県鎌倉市/【WEB面談可】

Bootstrap modalの使い方を紹介！｜modalを正しく使いこなそう

Bootstrapでのmodalの使い方とは？

基本的な使い方

フェードイン

センター表示

フォーム

Bootstrap modalを正しく使いこなそう

株式会社オープンアップシステムはこんな会社です

スマホアプリから業務系システムまで

充実した研修制度

資格取得を応援

東証プライム上場企業グループ

株式会社オープンアップシステムに興味を持った方へ

CSS新着案件New Job

ECサイトの開発/HTML/東京都千代田区/【WEB面談可】/在宅勤務

RedmineプラグインおよびWEB開発/Ruby/東京都中央区/【WEB面談可】/在宅勤務

Webシステム開発/東京都江東区/【WEB面談可】/テレワーク

Webマーケティング施策の運用サポート/CSS/東京都千代田区/【WEB面談可】

空港案内表示画面開発/HTML/神奈川県鎌倉市/【WEB面談可】

空港案内表示画面の運用保守/HTML/神奈川県鎌倉市/【WEB面談可】

関連記事Related Posts

Bootstrapでのnavbarの使い方の紹介｜navbarを正しく使いこなそう

BootstrapでのTooltipの使い方とは？Tooltipのオプションも紹介

Bootstrapでのテキスト・ブロック要素・グリッド・flexなどの左寄せ・中央寄せ・右寄せの方法

【初心者におすすめ】Bootstrap4を学ぶのに最適な本2選

Bootstrapでのalertの使い方を紹介｜alertを正しく使いこなそう！