我尝试了以下方法:
<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')
结果不是我预料的那样。模态的左上角位于屏幕的中心。
有人能帮帮我吗?有人试过吗?我想这是一件很平常的事。
更新:
在引导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。
如果你想让它只响应CSS，使用这个:
.modal.large {
width: 80%; /* respsonsive width */
margin-left:-40%; /* width/2) */
}
注1:我使用了一个.large类，你也可以在正常的.modal上这样做
注2:在Bootstrap 3中，左边的负边距可能不再需要了(未经个人确认)
/*Bootstrap 3*/
.modal.large {
width: 80%;
}
注3:在Bootstrap 3和4中，有一个modal-lg类。所以这可能是足够的，但如果你想让它响应，你仍然需要我为Bootstrap 3提供的修复。
在一些应用程序中使用固定模式，在这种情况下，你可以尝试width:80%;左:10%;(公式:left = 100 - width / 2)
如果你正在使用Bootstrap 3，你需要改变模态对话框div，而不是模态div，就像在接受的答案中显示的那样。此外，为了保持Bootstrap 3的响应性，使用媒体查询编写覆盖CSS是很重要的，这样在较小的设备上模式将是全宽的。
请参阅这个JSFiddle来尝试不同的宽度。
HTML
<div class="modal fade">
<div class="modal-dialog custom-class">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 class="modal-header-text">Text</h3>
</div>
<div class="modal-body">
This is some text.
</div>
<div class="modal-footer">
This is some text.
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
CSS
@media screen and (min-width: 768px) {
.custom-class {
width: 70%; /* either % (e.g. 60%) or px (400px) */
}
}
对于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">×</button>
<h4 id="myModalLabel" class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</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来让它居中。
我使用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中的列和其他响应元素来获得更多的控制。
要使模态响应/任意数量的列的大小:
1)在模态对话框div周围添加一个额外的div，类为.container -
<div class="container">
<div class="modal-dialog">
</div>
</div>
2)添加一点CSS，使模式全宽
.modal-dialog {
width: 100% }
3)如果你有其他情态动词，可以选择增加一个额外的类-
<div class="container">
<div class="modal-dialog modal-responsive">
</div>
</div>
.modal-responsive.modal-dialog {
width: 100% }
4)添加在一行/列，如果你想要各种大小的情态动词-
<div class="container">
<div class="row">
<div class="col-md-4">
<div class="modal-dialog modal-responsive">
...
</div>
</div>
</div>
</div>
