[解決済み] 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')

結果は、私が期待したものとは違っていました。モーダル左上が画面の中央に配置されています。

どなたか助けてください。誰かこれを試した人はいますか。私はそれがやりたいと思う珍しいことではないと仮定します。

解決方法は？

UPDATEしてください。

で 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を更新する心配がありません。