bootstrap3 で横長modal

2014年9月5日更新 view: 39 view
photoBy: http://designup.jp/wp/wp-content/uploads/2014/01/…

横長モーダルをつくってみよう

bootstrap3が読まれていることが条件

css

<style>

    .modal.modal-wide .modal-dialog {
        width: 90%;
    }
    .modal-wide .modal-body {
        overflow-y: auto;
    }

</style>

javascript

$(function () {
        $(".modal-wide").on("show.bs.modal", function() {
            var height = $(window).height() - 200;
            $(this).find(".modal-body").css("max-height", height);
        });
    });
スポンサードリンク

コンテンツ

<a data-toggle="modal" href="#shortModal" class="btn btn-primary">横長モーダル表示</a>


<div id="shortModal" class="modal modal-wide fade">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title">横長モーダル</h4>
            </div>
            <div class="modal-body">
                <p>コンテンツ</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary">OK</button>
            </div>
        </div><!-- /.modal-content -->
    </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

これでブラウザの横幅に合わせたコンテンツを作ることができる。

スポンサードリンク

関連記事

関連カテゴリ

コロ助

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

ピックアップ

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

12月12日 ( 火 ) にアクセスが多かった記事はこちら!