twitterbootstrap modal サイズを変更

2013年5月6日更新 view: 343 view

bootstrap の modal サイズを変更するCSS

ソース

<style type="text/css">
.modal.large{
    width: 1200px;
    margin-left: -600px; /* - width/2 */
    height: 1000px;
    margin-top: -100px; /* - height/10 */
}

.modal.large .modal-body{
    max-height:900px;/* - height - 100*/
}
</style>

<div id="myModal" class="modal hide fade large" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
    <h3 id="myModalLabel">カテゴリ変更</h3>
</div>
<div class="modal-body">

</div>
</div>
スポンサードリンク

これでmodalのサイズを変更できる。

modalウィンドウをポップアップ

<a href="#myModal" role="button" class="btn" data-toggle="modal">モーダルウィンドウを表示</a>

modalを閉じる js

以下の一文でmodalを閉じることが可能です。

$("#myModal").modal("hide");

modalが表示されたときに実行、callback

//フォーカスを合わせる
$('#myModal').on('shown', function () {
    alert('omange');
});

modalが閉じられたときに実行

on hidden でもできるが、動的に div を生成した場合の shown , hidden は以下になる。
live を使えってことですね。

$('.modal').live('hidden', function(e) {
            alert('chinge');
        });
スポンサードリンク

関連記事

関連カテゴリ

コロ助

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

ピックアップ

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

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