【Bootstrapのコンポーネント】モーダル(Modal)に関して

この記事では、Bootstrap4のモーダルコンポーネントについて解説します。

モーダルとはモーダルウィンドウのことで、クリックするとフワッと説明が浮かび上がってくるアレです(←どれ)。

早速どういった種類があるかを見ていきましょう。

モーダルの種類

Bootstrap4のモーダルの種類は一つですが、その配置場所や大きさなどを決める必要があります。

決めていく手順としては、以下の流れです。

■モーダルの基本要素を記述

■モーダルを表示する位置を決める
・上
・中央

■モーダルのサイズを決める

 

それぞれ、手順に沿って見ていきましょう。

モーダルの記述方法

モーダルの基本要素を記述

基本ソース

  1.     <div class=”container”>
  2.         <button type=”button” class=”btn btn-primary” data-toggle=”modaldata-target=”#hoge”>デモ</button>
  3.         <div class=”modal fade” id=”hoge“>
  4.           <div class=”modal-dialog“>
  5.             <div class=”modal-content“>
  6.               <div class=”modal-header“>
  7.                 <h5 class=”modal-titile“>モーダルタイトル</h5>
  8.                 <button type=”button” class=”close” data-dismiss=”modal“>
  9.                   <span>&times;</span>
  10.                 </button>
  11.               </div>
  12.               <div class=”modal-body“>
  13.                 ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  14.               </div>
  15.               <div class=”modal-footer“>
  16.                 <button type=”button” class=”btn btn-secondary” data-dismiss=”modal“>閉じる</button>
  17.                 <button type=”button” class=”btn btn-primary”>保存する</button>
  18.               </div>
  19.             </div>
  20.           </div>
  21.         </div>
  22.     </div>

 

初期状態でボタンをクリックすると・・・

モーダルウィンドウが現れる

コードには、Bootstrap4に組み込まれた、jsとのひも付けを意味するmodal-toggle属性。
そして、どのモーダルを開くかのひも付けは、data-target属性で定義したidを、divのCSSセレクターであるidで指定します。

さらに、fadeクラスが記述されているので、モーダルが出てくるときはフワッと効果がついています。

また、modal-headerとmodal-footerにあるdata-dismiss属性は、先ほどのものと同じくjsとのひも付けを意味し、モーダルを閉じる×ボタンになっています。

これを初めて実装できたときは、鳥肌ものでした。。
ソースをコピーしただけですが、この画面を見たときは嬉しさのあまり寒気がしました(笑)

モーダルを表示する位置を決める

次にどの位置にモーダルを配置させるかについてです。

初期状態では、上部に出現します。
これを中央にしたい場合、先ほどのコードに以下の赤文字のクラスを追加すればOK!

それ以外のコードは変わっていません。
中央に位置させたい場合

  1.     <div class=”container”>
  2.         <button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#hoge”>デモ</button>
  3.         <div class=”modal fade” id=”hoge”>
  4.           <div class=”modal-dialog modal-dialog-centered“>
  5.             <div class=”modal-content”>
  6.               <div class=”modal-header”>
  7.                 <h5 class=”modal-titile”>モーダルタイトル</h5>
  8.                 <button type=”button” class=”close” data-dismiss=”modal”>
  9.                   <span>&times;</span>
  10.                 </button>
  11.               </div>
  12.               <div class=”modal-body”>
  13.                 ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  14.               </div>
  15.               <div class=”modal-footer”>
  16.                 <button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>閉じる</button>
  17.                 <button type=”button” class=”btn btn-primary”>保存する</button>
  18.               </div>
  19.             </div>
  20.           </div>
  21.         </div>
  22.     </div>

 

中央表示の場合

modal-dialog-centeredクラスを記述することで、モーダルが中央に位置するようになりました。

モーダルのサイズを決める

次はサイズ感ですが、サイズ感は3つあります。
次の通りです。

■xl
■lg
■sm

上から大きい順になります。

xlサイズ

  1.     <div class=”container”>
  2.         <button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#hoge”>デモ</button>
  3.         <div class=”modal fade” id=”hoge”>
  4.           <div class=”modal-dialog modal-xl“>
  5.             <div class=”modal-content”>
  6.               <div class=”modal-header”>
  7.                 <h5 class=”modal-titile”>モーダルタイトル</h5>
  8.                 <button type=”button” class=”close” data-dismiss=”modal”>
  9.                   <span>&times;</span>
  10.                 </button>
  11.               </div>
  12.               <div class=”modal-body”>
  13.                 ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  14.               </div>
  15.               <div class=”modal-footer”>
  16.                 <button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>閉じる</button>
  17.                 <button type=”button” class=”btn btn-primary”>保存する</button>
  18.               </div>
  19.             </div>
  20.           </div>
  21.         </div>
  22.     </div>

 

xlサイズのモーダル

 

lgサイズ

  1.     <div class=”container”>
  2.         <button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#hoge”>デモ</button>
  3.         <div class=”modal fade” id=”hoge”>
  4.           <div class=”modal-dialog modal-lg”>
  5.             <div class=”modal-content”>
  6.               <div class=”modal-header”>
  7.                 <h5 class=”modal-titile”>モーダルタイトル</h5>
  8.                 <button type=”button” class=”close” data-dismiss=”modal”>
  9.                   <span>&times;</span>
  10.                 </button>
  11.               </div>
  12.               <div class=”modal-body”>
  13.                 ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  14.               </div>
  15.               <div class=”modal-footer”>
  16.                 <button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>閉じる</button>
  17.                 <button type=”button” class=”btn btn-primary”>保存する</button>
  18.               </div>
  19.             </div>
  20.           </div>
  21.         </div>
  22.     </div>

 

lgサイズのモーダル

 

smサイズ

  1.     <div class=”container”>
  2.         <button type=”button” class=”btn btn-primary” data-toggle=”modal” data-target=”#hoge”>デモ</button>
  3.         <div class=”modal fade” id=”hoge”>
  4.           <div class=”modal-dialog modal-sm”>
  5.             <div class=”modal-content”>
  6.               <div class=”modal-header”>
  7.                 <h5 class=”modal-titile”>モーダルタイトル</h5>
  8.                 <button type=”button” class=”close” data-dismiss=”modal”>
  9.                   <span>&times;</span>
  10.                 </button>
  11.               </div>
  12.               <div class=”modal-body”>
  13.                 ここにテキストが入ります。ここにテキストが入ります。ここにテキストが入ります。
  14.               </div>
  15.               <div class=”modal-footer”>
  16.                 <button type=”button” class=”btn btn-secondary” data-dismiss=”modal”>閉じる</button>
  17.                 <button type=”button” class=”btn btn-primary”>保存する</button>
  18.               </div>
  19.             </div>
  20.           </div>
  21.         </div>
  22.     </div>

 

smサイズのモーダル

それぞれ3種類のサイズ感のモーダルウィンドウでした。

まとめ

Bootstrap4のモーダルコンポーネントについて学習しました。

ここで、内容をおさらいします。

モーダルを導入する場合、以下の手順で進めます。

■モーダルの基本要素を記述

■モーダルを表示する位置を決める
・上
・中央

■モーダルのサイズを決める

 

以上のように進めると、スムーズに導入できるかと思います。

こういったコード一つで動きのあるサイトができるのは、とても便利です。
ぜひ、使ってみてください。