まとめーたー

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を画面サイズに合わせて、横幅いっぱいに開くことができます。

スポンサードリンク

関連記事

関連カテゴリ

  1. パソコン・ソフトウェア
  2. web
  3. デザイン
  4. CSS
  5. 基本
  1. パソコン・ソフトウェア
  2. web
  3. デザイン
  4. CSS
  5. twitter bootstrap

コロ助

web関連の記事や制作系の記事をどんどんまとめていきます。 宜しくお願いします!

ピックアップ

パソコン・ソフトウェア ランキング

9月24日 ( 日 ) にアクセスが多かった記事はこちら！