javascript - 如何更改 Twitter Bootstrap 模态框的默认宽度？

Question

我尝试了以下方法:

   <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')

结果不是我所期望的。模态左上角位于屏幕中央。

谁能帮帮我。有没有其他人试过这个。我想这不是一件不寻常的事情。

Answer 1

更新:

在 bootstrap 3 中，您需要更改模态对话框。因此，在这种情况下，您可以在 modal-dialog 所在的位置添加类 modal-admin。

原始答案( 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。