我尝试了以下方法:

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

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

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


当前回答

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

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

其他回答

如果Bootstrap>3,只需添加样式到您的模式。

<div class="modal-dialog" style="width:80%;">
  <div class="modal-content">
  </div>
</div>

对于Bootstrap 3,这里是如何做到这一点。

在HTML标记中添加一个模态范围样式(从Bootstrap 3文档中的示例改编而来)

<div class="modal fade modal-wide" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
        <h4 id="myModalLabel" class="modal-title">Modal title</h4>
      </div>
      <div class="modal-body">
        <p>One fine body&hellip;</p>
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div><!-- /.modal-content -->
  </div><!-- /.modal-dialog -->
</div><!-- /.modal -->

并添加以下CSS

.modal-wide .modal-dialog {
  width: 80%; /* or whatever you wish */
}

现在不需要在Bootstrap 3中覆盖margin-left来让它居中。

更新:

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

在Bootstrap 3中,你所需要的就是这个

<style>
    .modal .modal-dialog { width: 80%; }
</style>

上面的大部分答案对我来说都没用!!

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/js/bootstrap.min.js"></script> <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" /> <style> #myModal1 .modal-dialog { width: 80%; } #myModal2 .modal-dialog { width: 50%; } </style> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal1"> 80% </button> <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal2"> 50% </button> <center> <!-- Modal --> <div class="modal fade" id="myModal1" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> </button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> custom width : 80% </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> <!-- Modal --> <div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span> </button> <h4 class="modal-title" id="myModalLabel">Modal title</h4> </div> <div class="modal-body"> custom width : 50% </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> <button type="button" class="btn btn-primary">Save changes</button> </div> </div> </div> </div> </center>

达到预期效果使用,

.modal-dialog {
    width: 41% !important;
}