Bootstrap - モーダル：初級者向けガイド

こんにちは、未来のウェブ開発者たち！今日は、Bootstrapのモーダルの世界に飛び込みます。以前聞いたことがないても安心してください - このチュートリアルの終わりまでには、プロのようにポップアップウィンドウを作成できるようになります！

モーダルとは？

まず、モーダルとは何かを理解しましょう。本を読んでいると突然、重要な情報が書かれた小さな粘着ノートがポップアップする imagine してみてください。それは、ウェブサイト上のモーダルがやっていることです！モーダルは、現在のページの上に表示されるダイアログボックスまたはポップアップウィンドウです。

モーダルのコンポーネント

まず、Bootstrapモーダルの基本構造を見てみましょう：

<div class="modal" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">モーダルタイトル</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<p>モーダルの本文はここに書きます。</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">閉じる</button>
<button type="button" class="btn btn-primary">変更を保存</button>
</div>
</div>
</div>
</div>

これを分解すると：

• 最外層の <div> に "modal" クラスがあるのは、メインコンテナです。
• 中には "modal-dialog" があり、モーダルの形状と位置を制御します。
• "modal-content" は、モーダルの実際のコンテンツを保持します。
• そして、ヘッダー、ボディ、フッターの3つのセクションがあります。

ステイティックバックドロップ

ユーザーがインタラクションを行うまでモーダルを表示したい場合は、ステイティックバックドロップが便利です：

<div class="modal" data-bs-backdrop="static" data-bs-keyboard="false" tabindex="-1">
<!-- モーダルコンテンツここに -->
</div>

data-bs-backdrop="static"を追加することで、モーダルは外部をクリックしても閉じなくなります。data-bs-keyboard="false"は、Escキーで閉じるのを防ぎます。

スクローラブルモーダル

多くのコンテンツがある場合は、スクローラブルモーダルにします：

<div class="modal-dialog modal-dialog-scrollable">
<!-- モーダルコンテンツここに -->
</div>

modal-dialog-scrollable クラスを追加することで、モーダルボディがスクロール可能になり、ヘッダーとフッターは固定されます。

縦方向中央寄せ

モーダルを画面の真ん中に配置したい場合は、簡単です！

<div class="modal-dialog modal-dialog-centered">
<!-- モーダルコンテンツここに -->
</div>

modal-dialog-centered クラスが魔法を起こして、モーダルを縦方向中央に寄せます。

ツールチップとポップオーバー

モーダル内でツールチップやポップオーバーを使用することもできます。初期化を忘れないでください：

var myModal = document.getElementById('myModal')
var myInput = document.getElementById('myInput')

myModal.addEventListener('shown.bs.modal', function () {
myInput.focus()
})

グリッドの使用

Bootstrapのグリッドシステムはモーダル内でも動作します！以下は例です：

<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="col-md-4">.col-md-4</div>
<div class="col-md-4 ms-auto">.col-md-4 .ms-auto</div>
</div>
</div>
</div>

これは、モーダルボディ内に2カラムのレイアウトを作成します。

モーダルコンテンツの動的変更

モーダルのコンテンツを動的に変更することもできます。以下はその方法です：

var exampleModal = document.getElementById('exampleModal')
exampleModal.addEventListener('show.bs.modal', function (event) {
var button = event.relatedTarget
var recipient = button.getAttribute('data-bs-whatever')
var modalTitle = exampleModal.querySelector('.modal-title')
var modalBodyInput = exampleModal.querySelector('.modal-body input')

modalTitle.textContent = '新しいメッセージ：' + recipient
modalBodyInput.value = recipient
})

このスクリプトは、どのボタンがトリガーしたかによってモーダルのコンテンツを変更します。

モーダル間の切替

異なるモーダル間で切り替えることもできます：

<div class="modal fade" id="exampleModalToggle" aria-hidden="true" aria-labelledby="exampleModalToggleLabel" tabindex="-1">
<!-- 最初のモーダルコンテンツ -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle2" data-bs-toggle="modal">2番目のモーダルを開く</button>
</div>
<div class="modal fade" id="exampleModalToggle2" aria-hidden="true" aria-labelledby="exampleModalToggleLabel2" tabindex="-1">
<!-- 2番目のモーダルコンテンツ -->
<button class="btn btn-primary" data-bs-target="#exampleModalToggle" data-bs-toggle="modal">最初に戻る</button>
</div>

アニメーションの変更

モーダルのエントリを少し派手にしたい場合は、アニメーションを変更してみてください：

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<!-- モーダルコンテンツ -->
</div>

fade クラスは、綺麗なフェードインエフェクトを追加します。CSSを使用してカスタムアニメーションを作成することもできます！

動的ヘイト

モーダルはコンテンツに基づいて高さを調整できます：

<div class="modal-dialog modal-dialog-scrollable">
<!-- コンテンツの高さが異なるモーダルコンテンツ -->
</div>

modal-dialog-scrollable クラスにより、モーダルがスクロール可能になり、コンテンツの長さに関係なく見栄え良く表示されます。

アクセシビリティ

アクセシビリティを常に考慮してください。aria-labelledby を使用してモーダルタイトルを参照します：

<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">モーダルタイトル</h5>
<!-- それ以降のモーダルコンテンツ -->
</div>
</div>
</div>
</div>

オプションサイズ

モーダルにはさまざまなサイズがあります：

<!-- 小型モーダル -->
<div class="modal-dialog modal-sm">...</div>

<!-- 大型モーダル -->
<div class="modal-dialog modal-lg">...</div>

<!-- 特大型モーダル -->
<div class="modal-dialog modal-xl">...</div>

フルスクリーンモーダル

モーダルを整个画面に広げたい場合は、フルスクリーンクラスを使用します：

<div class="modal-dialog modal-fullscreen">
<!-- モーダルコンテンツ -->
</div>

特定の画面サイズでのみフルスクリーンにする場合は：

<div class="modal-dialog modal-fullscreen-sm-down">
<!-- モーダルコンテンツ -->
</div>

このモーダルは、小さな画面サイズ以下でフルスクリーンになります。

それで、これでBootstrapを使って素晴らしいモーダルを作成するための知識が身につきました。実践が大事ですので、これらの概念を試してみてください。ハッピーコーディング！

メソッド	説明
.modal(options)	コンテンツをモーダルとして活性化します。オプションのオブジェクトを任意で受け取ります。
.modal('toggle')	手動でモーダルを切り替えます。
.modal('show')	手動でモーダルを開きます。
.modal('hide')	手動でモーダルを隠します。
.modal('handleUpdate')	モーダルが開いている間に高さが変更された場合に、モーダルの位置を手動で調整します（例えば、スクロールバーが表示された場合）。
.modal('dispose')	エлементのモーダルを破壊します。

Credits: Image by storyset