我尝试了以下方法:

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

结果不是我预料的那样。模态的左上角位于屏幕的中心。

有人能帮帮我吗?有人试过吗?我想这是一件很平常的事。


当前回答

在Bootstrap 3 CSS中,你可以简单地使用:

body .modal-dialog {
    /* percentage of page width */
    width: 40%;
}

这确保了你不会破坏页面的设计,因为我们使用的是。modal-dialog而不是。modal,后者甚至会被应用到底纹上。

其他回答

我用过这种方法,非常适合我

$("#my-modal")
.modal("toggle")
.css({'width': '80%', 'margin-left':'auto', 'margin-right':'auto', 'left':'10%'});

我使用CSS和jQuery的组合,以及这个页面上的提示,使用Bootstrap 3创建流体的宽度和高度。

首先,使用一些CSS来处理内容区域的宽度和可选滚动条

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

然后用一些jQuery来调整内容区域的高度,如果需要的话

$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});

完整的编写和代码 http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

在Bootstrap 3+中,改变模态对话框大小最合适的方法是使用size属性。下面是一个例子,注意modal-dialog类中的modal-sm,表示一个小的模态。它可以包含值sm表示小,md表示中,lg表示大。

<div class="modal fade" id="ww_vergeten" tabindex="-1" role="dialog" aria-labelledby="modal_title" aria-hidden="true">
  <div class="modal-dialog modal-sm"> <!-- property to determine size -->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 class="modal-title" id="modal_title">Some modal</h4>
      </div>
      <div class="modal-body">

        <!-- modal content -->

      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-primary" id="some_button" data-loading-text="Loading...">Send</button>
      </div>
    </div>
  </div>
</div>

更新:

在引导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。

保留响应式设计,将宽度设置为您想要的。

.modal-content {
  margin-left: auto;
  margin-right: auto;
  max-width: 360px;
}

保持简单。