Bootstrap - モーダルデモ

モーダルとは？

こんにちは、Web開発者の卵さんたち！今日は、Bootstrapのモーダルのエキサイティングな世界に飛び込みます。あなたの近所の親切なコンピュータの先生として、私はこの旅をステップバイステップで案内します。お気に入りの飲み物を手に取り、リラックスして、このモーダルの冒険に一緒に参加しましょう！

定義と目的

Web開発用語としてのモーダルは、現在のページの上に表示されるポップアップウィンドウのようなものです。現在のビューから移動することなくコンテンツを表示する素晴らしい方法です。例えば、記事を読んでいると、特定の用語について更多信息を求めたいと思ったことがあるかもしれません。新しいページを開く代わりに、モーダルが現れて詳細を表示し、すぐに読み続けることができます。素晴らしいですね？

私たちの信頼のパートナーであるBootstrapは、使いやすく、カスタマイズ性が高いモーダルコンポーネントを提供しています。それをどのように実装するか見てみましょう！

モーダルの基本構造

HTML構造

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

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

これを分解してみましょう：

1. 最外側の <div> に modal クラスがあるものは、私たちのモーダル全体のコンテナです。
2. 中には modal-dialog があって、モーダルコンテンツを中央に配置します。
3. modal-content div は、実際のモーダルコンテンツを保持します。
4. そして、以下の3つの主要なセクションがあります：

• modal-header: タイトルと閉じるボタンを含みます。
• modal-body: メインコンテンツを置く場所です。
• modal-footer: 通常はアクションボタンを含みます。

モーダルの表示

では、このモーダルをどうやって表示するのでしょうか？トリガーが必要です！通常はボタンを使います：

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
デモモーダルを起動
</button>

data-toggle="modal" と data-target="#exampleModal" に注意してください。これらはBootstrapに何をすべきか（モーダルを切り替える）と、どのモーダルを表示するか（IDが "exampleModal" のもの）を伝えます。

忘れずにモーダルに id を追加して data-target と一致させること：

<div class="modal" id="exampleModal" tabindex="-1" role="dialog">
<!-- モーダルコンテンツここに -->
</div>

モーダルのカスタマイズ

サイズ

Bootstrapはモーダルのサイズを簡単に変更できます。modal-dialog div にクラスを追加してください：

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

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

<!-- 非常に大きなモーダル -->
<div class="modal-dialog modal-xl">...</div>

中央に配置されたモーダル

モーダルを完璧に中央に配置したい場合は、modal-dialog-centered クラスを追加します：

<div class="modal-dialog modal-dialog-centered">...</div>

スクロール可能なモーダル

モーダルコンテンツが長い場合は、スクロール可能にします：

<div class="modal-dialog modal-dialog-scrollable">...</div>

JavaScriptでの機能追加

Bootstrapのデータ属性は基本的な機能には素晴らしいですが、もっと細かい制御が必要な場合はJavaScriptを使います！

// モーダルを表示
$('#exampleModal').modal('show');

// モーダルを非表示
$('#exampleModal').modal('hide');

// モーダルを切り替え
$('#exampleModal').modal('toggle');

また、モーダルイベントをリスンすることもできます：

$('#exampleModal').on('shown.bs.modal', function () {
console.log('モーダルが表示されました！');
})

実用的な例：削除確認モーダル

実際の例ですべてをまとめましょう。例えば、タスクリストアプリを作成し、タスクを削除する前に確認する必要があります：

<!-- 削除ボタン -->
<button type="button" class="btn btn-danger" data-toggle="modal" data-target="#deleteModal">
タスクを削除
</button>

<!-- モーダル -->
<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="deleteModalLabel">削除を確認</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
このタスクを削除してもよろしいですか？この操作は元に戻せません。
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">キャンセル</button>
<button type="button" class="btn btn-danger" id="confirmDelete">削除</button>
</div>
</div>
</div>
</div>

そして、削除を処理するJavaScript：

$('#confirmDelete').on('click', function() {
// タスクを削除するコードここに
console.log('タスクが削除されました！');
$('#deleteModal').modal('hide');
});

結論

おめでとうございます！Bootstrapのモーダルの詳細を学びました。基本的な構造からカスタマイズ、そして実際の例まで、あなたはこの強力な機能をWebプロジェクトに追加するための準備ができています。

忘れずに、練習は完璧を生みます。さまざまなモーダルを作成し、サイズや配置を試してみてください。そして、楽しみながらコードを書きましょう！あなたが「モーダルのマスター」として友達の間で知られる日も遠くないかもしれません。

ハッピーコーディング、そしてあなたのモーダルが常に適切なタイミングでポップアップすることを願っています！

Credits: Image by storyset