Bootstrap5　モーダル（Modal）の作成。

Bootstrap 5のモーダルコンポーネントは、ポップアップウィンドウを表示し、ユーザーに特定の情報を提供したり、入力を求めたりするための柔軟なツールです。モーダルはウェブサイトやアプリケーションにおいて、重要な情報を目立たせるために非常に便利です。

基本的なモーダルの構造

<!-- モーダルのトリガーボタン -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#exampleModal">
  モーダルを開く
</button>

<!-- モーダルの構造 -->
<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>
        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
      </div>
      <div class="modal-body">
        ここにモーダルの内容を記述します。
      </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>

主な要素の説明

• トリガーボタン: モーダルを表示するためのボタン。data-bs-toggle="modal" 属性と data-bs-target="#exampleModal" 属性を使用してモーダルをトリガーします。
• モーダルの構造:
  • .modal: モーダル全体のコンテナ。fade クラスを追加するとアニメーションが有効になります。
  • .modal-dialog: モーダルダイアログのコンテナ。
  • .modal-content: モーダルの内容を含むコンテナ。
  • .modal-header: モーダルのヘッダー。タイトルと閉じるボタンを含みます。
  • .modal-body: モーダルの本文。ここに主なコンテンツを記述します。
  • .modal-footer: モーダルのフッター。アクションボタンを含みます。

まとめ

Bootstrap 5のモーダルコンポーネントを使用することで、ユーザーに特定の情報を提供したり、入力を求めたりすることができます。モーダルはカスタマイズ性が高く、サイズや配置、動的な制御が可能です。ぜひ、プロジェクトでモーダルコンポーネントを活用して、効果的なユーザーインターフェースを実現してください。

関連投稿:

【初心者の方向け】 Bootstrap4の使い方 ボーダー 【初心者の方向け】 Bootstrap4の使い方 カルーセル オリジナルサイト作成お得プラン 【初心者の方向け】 Bootstrap4の使い方 ドロップダウン