bootstrapモーダルmodal.jsでモーダルウィンドウを開くサンプルとオプションの付け方

モーダルのサイズを変更する

class="modal-dialog"が付いている個所にmodal-lgのクラスを付けると、幅が広いタイプのモーダルを開く。

class="modal-dialog"が付いている個所にmodal-smのクラスを付けると、幅が狭いタイプのモーダルを開く。

出現アニメーション

class="modal"が付いている個所にfadeのクラスを省くと、出現アニメーションがなくなる。

背景の指定

button要素にdata-backdrop="true"をしているると、背景が黒背景になる。

button要素にdata-backdrop="false"をしているると、背景がそのままで、背景クリックしてもモーダルを閉じない。

button要素にdata-backdrop="static"をしているると、景が黒背景になり、背景クリックしてもモーダルを閉じない。

複数のオプションを指定し、JavaScriptで呼び出す

        <script>
        $( function() {
            $('#sampleButton').click( function () {
                $('#sampleModal').modal(
                    {
                        keyboard: false,
                        backdrop: "static",
                    }
                );
            });
        });
        </script>