Bootstrap4移行ガイドを読む（コンポーネント編、モーダル）

モーダル - Bootstrap4移行ガイド

• Webページのひとつ上にレイヤーを重ね、ユーザーに限定的な行動をさせるコンポーネント
• Bootstrapのモーダルは背景（backdrop）をクリックすると閉じるボタンを押した時と同じように、消える
• モーダルコンポーネントを使うには、.modal で要素を包み、その中に必要なインナーパーツをいれる
  • .modal .modal-dialog .modal-content みたいな感じ
  • この中に .modal-header, .modal-body, .modal-footer が入る
• モーダル表示にアニメーションを加えるには .fade クラスを .modal に追加する
• モーダルは通常ページのトップから少し離れた場所に表示される
• 垂直方向中央に表示するには、.modal-dialog と同じ要素に .modal-dialog-centered を指定する
• ツールチップをモーダル内に表示することもできる。JavaScriptを使う
• ポップオーバーをモーダル内に表示することもできる。JavaScriptを使う
• .modal-body 内に .container-fluid を入れ子にして、モーダル内でグリッドを使うことも可能
• .modal-dialog に .modal-lg を追加するとモーダルが大きくなる
• .modal-dialog に .modal-sm を追加するとモーダルが小さくなる