【Bootstrap3】ボタンでモーダルダイアログを呼び出す方法!
Bootrap3で簡単なモーダル処理の記述と説明をしていきます!
最後に記述しているソースコードのサンプルを実行できるのでお試しを!
htmlソースコード
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#sampleModal"> モーダル・ダイアログ 呼び出し </button> <!-- モーダル・ダイアログ --> <div class="modal fade" id="sampleModal" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span>×</span></button> <h4 class="modal-title">タイトル</h4> </div> <div class="modal-body"> 本文 </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">閉じる</button> <button type="button" class="btn btn-primary">ボタン</button> </div> </div> </div> </div>
ポイントとしては5つ
1. モーダル・ダイアログを呼び出す要素(button要素やa要素など)のdata-toggle属性にmodalを指定、data-target属性に、2のモーダル・ダイアログ用div要素のid属性値を指定します。
2. モーダル・ダイアログ用div要素のclass属性にmodal fadeを指定する。こうすることでモーダル呼び出し時にアニメーションを付与することができます。
3. 2のclass属性にmodalを指定したモーダル・ダイアログ用div要素内に、class属性にmodal-dialogを指定したdiv要素を配置します。
4. 3のdiv要素内に、class属性にmodal-contentを指定したdiv要素を配置します。ここがモーダルの表示コンテンツとなります。
5. 4のdiv要素内に、必要に応じ、ヘッダ(class属性にmodal-headerを指定したdiv要素)、本文(class属性にmodal-bodyを指定したdiv要素)、フッタ(class属性にmodal-footerを指定したdiv要素)を配置します。
サンプル
上のサンプルソースを実行しています。
See the Pen
Bootstrap3 modal by Kazuki Tsujimoto (@mossan)
on CodePen.
ではまた~~!