bootstrap3 modal 横幅いっぱい

2014年9月14日更新 view: 250 view
photoBy: http://media02.hongkiat.com/twitter-bootstrap/twi…

bootstrap3でmodalwindowを横幅いっぱいにするには?

スポンサードリンク

まずはjs。coffeescriptだけど。

#横長モーダル
$(".modal-wide").on "show.bs.modal", ->
    height = $(window).height() - 200
    $(this).find(".modal-body").css "max-height", height

modal本体

<div id="myModal" class="modal modal-wide fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <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">Close</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

modalを開くボタン

<a class="btn btn-primary" data-toggle="modal" data-target="#myModal">
Basic Modals
</a>

この3つをコピペするだけでmodalを画面サイズに合わせて、横幅いっぱいに開くことができます。

スポンサードリンク

関連記事

関連カテゴリ