☰

Twitter Bootstrap モーダル ボックスのデフォルトの幅を変更するにはどうすればよいですか? 質問する

tag-icon • tag-icon javascript jquery twitter-bootstrap-2
Twitter Bootstrap モーダル ボックスのデフォルトの幅を変更するにはどうすればよいですか? 質問する

次のことを試しました:

   <div class="modal hide fade modal-admin" id="testModal" style="display: none;">
        <div class="modal-header">
          <a data-dismiss="modal" class="close">×</a>
          <h3 id='dialog-heading'></h3>
        </div>
        <div class="modal-body">
            <div id="dialog-data"></div>
        </div>
        <div class="modal-footer">
          <a data-dismiss="modal" class="btn" >Close</a>
          <a class="btn btn-primary" id="btnSaveChanges">Save changes</a>
        </div>
    </div>

そしてこの Javascript:

    $('.modal-admin').css('width', '750px');
    $('.modal-admin').css('margin', '100px auto 100px auto');
    $('.modal-admin').modal('show')

結果は予想したものとは異なります。モーダルの左上が画面の中央に配置されています。

誰か助けてくれませんか。他にこれを試した人はいますか。これは珍しいことではないと思います。

ベストアンサー1

アップデート：

bootstrap 3モーダルダイアログを変更する必要があります。この場合、 が立っているmodal-admin場所にクラスを追加できますmodal-dialog。

元の回答 (Bootstrap < 3)

JS/jQuery で変更しようとしているのには何か理由があるのでしょうか?

CSS だけで簡単に実行できます。つまり、ドキュメント内でスタイルを設定する必要はありません。独自のカスタム CSS ファイルでは、次のコードを追加します。

body .modal {
    /* new custom width */
    width: 560px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -280px;
}

あなたの場合：

body .modal-admin {
    /* new custom width */
    width: 750px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -375px;
}

body をセレクターの前に配置した理由は、デフォルトよりも高い優先度を設定するためです。こうすることで、カスタム CSS ファイルに追加して、Bootstrap を安心して更新できます。

おすすめ記事