javascript - 如何更改Twitter Bootstrap模式框的默认宽度？(How can I change the default width of a Twitter Bootstrap modal box?)

Question

I tried the following:

(我尝试了以下方法：)

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

And this Javascript:

(这个Javascript：)

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

The result is not what I expected.

(结果不是我的预期。)

The modal top left is positioned in the center of the screen.

(模态左上方位于屏幕中央。)

Can anyone help me.

(谁能帮我。)

Has anyone else tried this.

(有没有人试过这个。)

I assume it's not an unusual thing to want to do.

(我认为这不是一件不寻常的事情。)

  ask by translate from so

Answer 1

UPDATE:

(更新：)

In bootstrap 3 you need to change the modal-dialog.

(在bootstrap 3您需要更改模态对话框。)

So in this case you can add the class modal-admin in the place where modal-dialog stands.

(因此，在这种情况下，您可以在modal-dialog所在的位置添加类modal-admin 。)

Original Answer (Bootstrap < 3)

(原始答案（Bootstrap <3）)

Is there a certain reason you're trying to change it with JS/jQuery?

(是否有某种原因你试图用JS / jQuery改变它？)

You can easily do it with just CSS, which means you don't have to do your styling in the document.

(您可以使用CSS轻松完成，这意味着您无需在文档中进行样式设置。)

In your own custom CSS file, you add:

(在您自己的自定义CSS文件中，添加：)

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

In your case:

(在你的情况下：)

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

The reason I put body before the selector is so that it takes a higher priority than the default.

(我将body放在选择器之前的原因是它比默认值具有更高的优先级。)

This way you can add it to an custom CSS file, and without worries update Bootstrap.

(这样您就可以将其添加到自定义CSS文件中，而无需担心更新Bootstrap。)