如何更改Twitter Bootstrap模式框的默认宽度？
我尝试了以下内容：
<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')
结果不是我所期望的。 模式左上angular位于屏幕中央。
任何人都可以帮助我 有没有其他人试过这个。 我认为这并不是一件不寻常的事情。
更新：
在bootstrap 3你需要改变modal dialog。 所以在这种情况下，您可以在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; }
我在select器之前放置主体的原因是它比默认的优先级更高。 这样你可以把它添加到一个自定义的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提供的修复。
在某些应用程序中使用fixed模式，在这种情况下，您可以尝试width:80%; left:10%; width:80%; left:10%; （公式：left = 100 – width / 2）
如果你正在使用Bootstrap 3，你需要改变modal dialogdiv，而不是像接受的答案中显示的模态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 % (eg 60%) or px (400px) */ } }
如果你想要的东西不打破相对的devise尝试这个：
body .modal { width: 90%; /* desired relative width */ left: 5%; /* (100%-width)/2 */ /* place center */ margin-left:auto; margin-right:auto; }
正如@Marco Johannesen所说，select器之前的“主体”是这样的，它比默认的优先级更高。
在Bootstrap 3+中，改变modal dialog大小的最合适的方法是使用size属性。 下面是一个例子，注意modal-sm modal-dialog的modal-sm ，表示一个小模态。 它可以包含sm值为small， md为medium， lg为large。
<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">×</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>
对于Bootstrap 3这里是如何做到这一点。
将modal-wide样式添加到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来Bootstrap 3现在居中。
在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">×</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">×</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>
解决scheme是从这个页面
$('#feedback-modal').modal({ backdrop: true, keyboard: true }).css({ width: 'auto', 'margin-left': function () { return -($(this).width() / 2); } });
Bootstrap 3：为了维护小型和特殊小型设备的响应function，我做了以下工作：
@media (min-width: 768px) { .modal-dialog-wide { width: 750px;/* your width */ } }
在Bootstrap的v3中有一个简单的方法来使模态更大。 只需在modal dialog旁边添加类modal-lg即可。
<!-- My Modal Popup --> <div id="MyWidePopup" class="modal fade" role="dialog"> <div class="modal-dialog modal-lg"> <---------------------RIGHT HERE!! <!-- Modal content--> <div class="modal-content">
如果Bootstrap> 3，只需添加样式到你的模态。
<div class="modal-dialog" style="width:80%;"> <div class="modal-content"> </div> </div>
我发现这个解决scheme对我来说效果更好。 你可以使用这个：
$('.modal').css({ 'width': function () { return ($(document).width() * .9) + 'px'; }, 'margin-left': function () { return -($(this).width() / 2); } });
或根据您的要求：
$('.modal').css({ width: 'auto', 'margin-left': function () { return -($(this).width() / 2); } });
看到我发现的post： https ： //github.com/twitter/bootstrap/issues/675
这就是我所做的，在我的custom.css中，我添加了这些行，这就是全部。
.modal-lg { width: 600px!important; margin: 0 auto; }
显然，你可以改变宽度的大小。
FYI Bootstrap 3自动处理左侧的属性。 所以简单地添加这个CSS会改变宽度并保持居中：
.modal .modal-dialog { width: 800px; }
保留响应式devise，根据需要设置宽度。
.modal-content { margin-left: auto; margin-right: auto; max-width: 360px; }
把事情简单化。
改变类model-dialog可以达到预期的结果。 这些小窍门对我有用。 希望它能帮助你解决这个问题。
.modal-dialog { width: 70%; }
尝试如下所示（请参阅此处的实时jsfiddle示例： http : //jsfiddle.net/periklis/hEThw/1/ ）
<a class="btn" onclick = "$('#myModal').modal('show');$('#myModal').css('width', '100px').css('margin-left','auto').css('margin-right','auto');" ref="#myModal" >Launch Modal</a> <div class="modal" id="myModal" style = "display:none"> <div class="modal-header"> <a class="close" data-dismiss="modal">×</a> <h3>Modal header</h3> </div> <div class="modal-body"> <p>One fine body…</p> </div> <div class="modal-footer"> <a href="#" class="btn">Close</a> <a href="#" class="btn btn-primary">Save changes</a> </div> </div>
使用Bootstrap 3，所有需要的是通过CSS给modal dialog的百分比值
CSS
#alertModal .modal-dialog{ width: 20%; }
我使用CSS和jQuery的组合，以及本页面的提示，使用Bootstrap 3创buildstream体宽度和高度。
首先，一些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); });
在使用CSS的Bootstrap 3中 ，您可以简单地使用：
body .modal-dialog { /* percentage of page width */ width: 40%; }
这可以确保您不会中断页面的devise，因为我们使用的是.modal-dialog而不是.modal ，甚至可以应用到阴影。
而不是使用百分比来实现模态响应，我发现可以通过使用已经内置到引导中的列和其他响应元素来进行更多的控制。
为了使模式响应/任何数量的列的大小：
1）在一个.container类的modal dialog中添加一个额外的div –
<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>
在你的css文件中添加以下内容
.popover{ width:auto !important; max-width:445px !important; min-width:200px !important; }
达到预期效果使用，
.modal-dialog { width: 41% !important; }
我用这种方式，这对我来说是完美的
$("#my-modal") .modal("toggle") .css({'width': '80%', 'margin-left':'auto', 'margin-right':'auto', 'left':'10%'});
Bootstrap 2基于较less的解决scheme（不需要js）：
.modal-width(@modalWidth) { width: @modalWidth; margin-left: -@modalWidth/2; @media (max-width: @modalWidth) { position: fixed; top: 20px; left: 20px; right: 20px; width: auto; margin: 0; &.fade { top: -100px; } &.fade.in { top: 20px; } } }
然后，无论你想指定一个模态宽度：
#myModal { .modal-width(700px); }
我使用SCSS和完全响应模式：
.modal-dialog.large { @media (min-width: $screen-sm-min) { width:500px; } @media (min-width: $screen-md-min) { width:700px; } @media (min-width: $screen-lg-min) { width:850px; } }
you can use any prefix or postfix name for modal. but you need to make sure that's should use everywhere with same prefix/postfix name. body .modal-nk { /* new custom width */ width: 560px; /* must be half of the width, minus scrollbar on the left (30px) */ margin-left: -280px; }
要么
body .nk-modal { /* new custom width */ width: 560px; /* must be half of the width, minus scrollbar on the left (30px) */ margin-left: -280px; }
下面是通过javascript设置模式popup宽度和左边位置的代码。
$（'＃openModalPopupId'）。css（{“width”：“80％”，“left”：“30％”}）;
Bootstrap 3.xx
<!-- Modal --> <div class="modal fade" id="employeeBasicDetails" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> <div class="modal-dialog modal-sm employeeModal" role="document"> <form> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="myModalLabel">Modal Title</h4> </div> <div class="modal-body row"> Modal Body... </div> <div class="modal-footer"> <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> </div> </div> </form> </div> </div>
注意我在第二个div中添加了.employeeModal类。 然后风格那个class。
.employeeModal{ width: 700px; }
.Size(ModalSize.Large) sample: using (var modal = Html.Bootstrap().Begin(new Modal().Id("modalProject_" + modelItem.id).Closeable().Size(ModalSize.Large))) { }
