373

我尝试了以下方法：

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

结果不是我所期望的。模态左上角位于屏幕中央。

谁能帮我。有没有其他人试过这个。我想这不是一件不寻常的事情。

4

32 回答 32

373

更新：

在bootstrap 3您需要更改模态对话框。所以在这种情况下，您可以在站立modal-admin的地方添加类。modal-dialog

原始答案（引导程序 < 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。

于 2012-04-16T06:27:54.653 回答
271

如果你想让它只用 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）

于 2013-04-18T18:28:42.137 回答
107

如果您使用的是 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">&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) */
    }
}
于 2013-08-01T17:02:50.553 回答
80

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

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

正如@Marco Johannesen 所说，选择器之前的“主体”的优先级高于默认值。

于 2012-05-09T09:49:46.583 回答
41

在 Bootstrap 3+ 中，更改模式对话框大小的最合适方法是使用 size 属性。下面是一个例子，注意modal-sm沿着modal-dialog类，表示一个小模态。它可以包含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>
于 2014-04-29T10:08:03.727 回答
34

因为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">&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 */
}

现在无需覆盖margin-left即可Bootstrap 3使其居中。

于 2013-09-04T01:00:16.763 回答
19

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

于 2015-04-15T16:14:50.440 回答
17

解决方案取自此页面

$('#feedback-modal').modal({
    backdrop: true,
    keyboard: true
}).css({
    width: 'auto',
    'margin-left': function () {
        return -($(this).width() / 2);
    }
});
于 2012-07-05T11:03:22.160 回答
15

在 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">
于 2016-08-23T07:11:20.893 回答
13

Bootstrap 3：为了保持小型和超小型设备的响应功能，我执行了以下操作：

@media (min-width: 768px) {
.modal-dialog-wide
{ width: 750px;/* your width */ }
}
于 2013-09-27T11:37:58.800 回答
7

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

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

显然，您可以更改宽度的大小。

于 2014-06-22T14:09:55.873 回答
7

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

<div class="modal-dialog" style="width:80%;">
  <div class="modal-content">
  </div>
</div>
于 2016-06-13T05:43:06.763 回答
6

我发现这个解决方案对我来说效果更好。你可以使用这个：

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

于 2013-02-08T01:56:04.463 回答
5

仅供参考，Bootstrap 3 会自动处理 left 属性。因此，只需添加此 CSS 即可更改宽度并使其居中：

.modal .modal-dialog { width: 800px; }
于 2013-09-09T08:15:37.083 回答
4

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

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

把事情简单化。

于 2014-02-19T13:09:13.853 回答
4

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

.modal-dialog {
    width: 70%;
}
于 2017-03-15T06:47:43.313 回答
3

我结合使用了 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/

于 2013-10-16T22:38:50.323 回答
3

使用 Bootstrap 3，所需要的只是通过 CSS 为模态对话框提供的百分比值

CSS

#alertModal .modal-dialog{
     width: 20%;
}
于 2013-11-01T05:03:33.917 回答
3

在带有 CSS 的Bootstrap 3中，您可以简单地使用：

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

这可以确保您不会破坏页面的设计，因为我们正在使用.modal-dialog而不是.modal将其应用于阴影。

于 2015-07-09T18:28:16.773 回答
2

尝试以下类似的操作（请参阅此处的实时 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…&lt;/p>
  </div>
  <div class="modal-footer">
    <a href="#" class="btn">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>
  </div>
</div>​
于 2012-04-16T06:22:20.380 回答
2

与其使用百分比来使模态响应，我发现使用引导程序中已经内置的列和其他响应元素可以进行更多控制。

要使模态响应/任何数量的列的大小：

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>
于 2014-01-15T11:50:38.673 回答
2

在您的 css 文件中添加以下内容

.popover{
         width:auto !important; 
         max-width:445px !important; 
         min-width:200px !important;
       }
于 2014-12-05T04:36:17.080 回答
2

使用下面的脚本：

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

  overflow-y: scroll;
}

演示：

在 gif 上演示

于 2018-06-20T12:10:02.307 回答
2

我为 Bootstrap 4.1 解决了它

混合以前发布的解决方案

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

于 2018-10-10T20:18:59.933 回答
1

使用达到预期结果，

.modal-dialog {
    width: 41% !important;
}
于 2016-08-05T14:16:00.900 回答
1

引导程序 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">&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;
    }

代码片段截图

于 2017-08-04T03:34:21.020 回答
0

我用这种方式，它对我来说很完美

$("#my-modal")
.modal("toggle")
.css({'width': '80%', 'margin-left':'auto', 'margin-right':'auto', 'left':'10%'});
于 2013-09-02T14:49:37.843 回答
0

Bootstrap 2 的基于较少的解决方案（无 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);
}
于 2013-11-25T23:41:09.890 回答
0

我使用了 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; }
}
于 2014-08-02T17:10:34.803 回答
0 
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;
        }
于 2017-05-18T11:17:19.910 回答
0

下面是通过javascript设置模式弹出宽度和屏幕左侧位置的代码。

$('#openModalPopupId').css({ "width": "80%", "left": "30%"});

于 2017-05-24T07:28:38.843 回答
0 
.Size(ModalSize.Large)

sample:
 using (var modal = Html.Bootstrap().Begin(new Modal().Id("modalProject_" + modelItem.id).Closeable().Size(ModalSize.Large)))
                {
}
于 2017-08-08T16:31:39.820 回答