bootstrapモーダルmodalのサンプルとオプションの付け方を解説します。
参考文献
http://getbootstrap.com/javascript/#modals
モーダルのサイズを変更する
class="modal-dialog"が付いている個所にmodal-lgのクラスを付けると、幅が広いタイプのモーダルを開く。
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal1">テスト </button> <div class="modal fade" id="modal1" tabindex="-1"> <div class="modal-dialog modal-lg"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></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>
class="modal-dialog"が付いている個所にmodal-smのクラスを付けると、幅が狭いタイプのモーダルを開く。
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal2">テスト </button> <div class="modal fade" id="modal2" tabindex="-1"> <div class="modal-dialog modal-sm"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></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>
出現アニメーション
class="modal"が付いている個所にfadeのクラスを省くと、出現アニメーションがなくなる。
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal3">テスト </button> <div class="modal" id="modal3" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></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>
背景の指定
button要素にdata-backdrop="true"をしているると、背景が黒背景になる。
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal4" data-backdrop="true">テスト </button> <div class="modal fade m-b-3" id="modal4" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></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>
button要素にdata-backdrop="false"をしているると、背景がそのままで、背景クリックしてもモーダルを閉じない。
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal5" data-backdrop="false">テスト </button> <div class="modal fade" id="modal5" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></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>
button要素にdata-backdrop="static"をしているると、景が黒背景になり、背景クリックしてもモーダルを閉じない。
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal6" data-backdrop="static">テスト </button> <div class="modal fade" id="modal6" tabindex="-1"> <div class="modal-dialog"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"> <span class="glyphicon glyphicon-remove" aria-hidden="true"></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>
複数のオプションを指定し、JavaScriptで呼び出す
<button type="button" id="sampleButton" class="btn btn-primary">テスト </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>