我如何改变Twitter引导模式框的默认宽度?

我尝试了以下方法:

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

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

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

430486 次浏览
小开

尝试像下面这样的东西(参见这里的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中，你需要改变模态对话框。 所以在这种情况下，你可以在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。

小开

如果你想要一些不会破坏相对设计的东西，试试这个:

body .modal {
width: 90%; /* desired relative width */
left: 5%; /* (100%-width)/2 */
/* place center */
margin-left:auto;
margin-right:auto;
}

正如@Marco Johannesen所说，选择器之前的“主体”是为了让它具有比默认更高的优先级。

小开

解决方案取自这页

$('#feedback-modal').modal({
backdrop: true,
keyboard: true
}).css({
width: 'auto',
'margin-left': function () {
return -($(this).width() / 2);
}
});
小开

我找到了一个更适合我的方法。你可以用这个:

$('.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);
}
});

请看我发现的帖子: https://github.com/twitter/bootstrap/issues/675 < / p >

小开

如果你想让它只响应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%;(公式:left = 100 - width / 2)

小开

如果你正在使用Bootstrap 3，你需要改变模态对话框div，而不是模态div，就像在接受的答案中显示的那样。此外，为了保持Bootstrap 3的响应性，使用媒体查询编写覆盖CSS是很重要的，这样在较小的设备上模式将是全宽的。

参见这JSFiddle来尝试不同的宽度。

超文本标记语言

<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">&times;</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) */
}
}
小开

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

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

对于Bootstrap 3，下面是如何做到这一点。

在HTML标记中添加modal-wide样式(从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来让它居中。

小开

供参考，Bootstrap 3自动处理左侧属性。所以简单地添加这个CSS将改变宽度并保持居中:

.modal .modal-dialog { width: 800px; }
小开

引导3:为了保持小型和超小型设备的响应功能，我做了以下工作:

@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}
小开

我使用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/ < / p >

小开

使用Bootstrap 3，所需要的只是通过CSS给模态对话框一个百分比值

CSS

#alertModal .modal-dialog{
width: 20%;
}
小开

基于较少的解决方案(无js) Bootstrap 2:

.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);
}
小开

与其使用百分比来使模式响应，我发现可以通过使用已经内置到bootstrap中的列和其他响应元素来获得更多的控制。

要使模态响应/任意数量的列的大小: < br > < br > 1)在modal-dialog div周围添加一个额外的div，类为.container -

<div class="container">
<div class="modal-dialog">
</div>
</div>
< p > < br > 2)添加一些CSS，使模式全宽-

.modal-dialog {
width: 100% }
< p > < br > 3)如果你有其他情态动词，可以选择添加一个额外的类-

<div class="container">
<div class="modal-dialog modal-responsive">
</div>
</div>


.modal-responsive.modal-dialog {
width: 100% }
< p > < br > 4)添加在行/列，如果你想要各种大小的情态-

<div class="container">
<div class="row">
<div class="col-md-4">
<div class="modal-dialog modal-responsive">
...
</div>
</div>
</div>
</div>
小开

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

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

保持简单。

小开

在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>
小开

这就是我在custom。css中所做的，我添加了这些行，仅此而已。

.modal-lg {
width: 600px!important;
margin: 0 auto;
}

显然，你可以改变宽度的大小。

小开

我使用了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; }
}
小开

在css文件中添加以下内容

.popover{
width:auto !important;
max-width:445px !important;
min-width:200px !important;
}
小开

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

小开

在引导3 with CSS中，你可以简单地使用:

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

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

小开

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

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

达到预期效果使用，

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

在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">
小开

改变类model-dialog可以达到预期的结果。这些小技巧对我很有用。希望能帮助你解决这个问题。

.modal-dialog {
width: 70%;
}
小开 
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设置模式弹出宽度和屏幕左侧位置的代码。

$ (' # openModalPopupId ') . css({“宽度”:“80%”,“左”:“30%”});

小开

3.引导x.x

   <!-- 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">&times;</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类。然后设置该类的样式。

.employeeModal{
width: 700px;
}

截图of code snippet

小开 
.Size(ModalSize.Large)


sample:
using (var modal = Html.Bootstrap().Begin(new Modal().Id("modalProject_" + modelItem.id).Closeable().Size(ModalSize.Large)))
{
}
小开

使用下面的脚本:

.modal {
--widthOfModal: 98%;
width: var(--widthOfModal) !important;
margin-left: calc(calc(var(--widthOfModal) / 2) * (-1)) !important;
height: 92%;


overflow-y: scroll;
}

演示:

Demo on gif

小开

我为Bootstrap 4.1解决了这个问题

混合之前发布的解决方案

.modal-lg {
max-width: 90% !important; /* desired relative width */
margin-left:auto !important;
margin-right:auto !important;
}


提交答案