Javascript 如何更改 Twitter Bootstrap 模式框的默认宽度？

How can I change the default width of a Twitter Bootstrap modal box?

提问by Marco Johannesen

I tried the following:

我尝试了以下方法：

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

And this Javascript:

而这个 Javascript：

    $('.modal-admin').css('width', '750px');
    $('.modal-admin').css('margin', '100px auto 100px auto');
    $('.modal-admin').modal('show')

The result is not what I expected. The modal top left is positioned in the center of the screen.

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

Can anyone help me. Has anyone else tried this. I assume it's not an unusual thing to want to do.

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

回答by Marco Johannesen

UPDATE:

更新：

In bootstrap 3you need to change the modal-dialog. So in this case you can add the class modal-adminin the place where modal-dialogstands.

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

Original Answer (Bootstrap < 3)

原始答案（引导程序 < 3）

Is there a certain reason you're trying to change it with JS/jQuery?

您是否有某种原因试图用 JS/jQuery 更改它？

You can easily do it with just CSS, which means you don't have to do your styling in the document. In your own custom CSS file, you add:

您只需使用 CSS 即可轻松完成，这意味着您无需在文档中进行样式设置。在您自己的自定义 CSS 文件中，添加：

body .modal {
    /* new custom width */
    width: 560px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -280px;
}

In your case:

在你的情况下：

body .modal-admin {
    /* new custom width */
    width: 750px;
    /* must be half of the width, minus scrollbar on the left (30px) */
    margin-left: -375px;
}

The reason I put body before the selector is so that it takes a higher priority than the default. This way you can add it to an custom CSS file, and without worries update Bootstrap.

我将 body 放在选择器之前的原因是它比默认值具有更高的优先级。这样您就可以将其添加到自定义 CSS 文件中，而无需担心更新 Bootstrap。

回答by Nick N.

If you want to make it responsive with just CSS, use this:

如果您只想使用 CSS 使其响应，请使用以下命令：

.modal.large {
    width: 80%; /* respsonsive width */
    margin-left:-40%; /* width/2) */ 
}

Note 1: I used a .largeclass, you could also do this on the normal .modal

注 1：我使用了一个.large类，您也可以在正常情况下执行此操作.modal

Note 2: In Bootstrap 3 the negative margin-left may not be needed anymore(not confirmed personally)

注 2：在 Bootstrap 3 中，负边距可能不再需要（未亲自确认）

/*Bootstrap 3*/
.modal.large {
     width: 80%;
}

Note 3: In Bootstrap 3 and 4, there is a modal-lgclass. So this may be sufficient, but if you want to make it responsive, you still need the fix I provided for Bootstrap 3.

注 3：在 Bootstrap 3 和 4 中，有一个 modal-lg类。所以这可能就足够了，但如果你想让它具有响应性，你仍然需要我为 Bootstrap 3 提供的修复。

In some application fixedmodals are used, in that case you could try width:80%; left:10%;(formula: left = 100 - width / 2)

在某些应用程序fixed中使用模态，在这种情况下，您可以尝试width:80%; left:10%;（公式：left = 100 - width / 2）

回答by arcdegree

If you're using Bootstrap 3, you need to change the modal-dialog div and not the modal div like it is shown in the accepted answer. Also, to keep the responsive nature of Bootstrap 3, it's important to write the override CSS using a media query so the modal will be full width on smaller devices.

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

See this JSFiddleto experiment with different widths.

请参阅此 JSFiddle以尝试不同的宽度。

HTML

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

CSS

@media screen and (min-width: 768px) {
    .custom-class {
        width: 70%; /* either % (e.g. 60%) or px (400px) */
    }
}

回答by mlunoe

If you want something that does not break the relative design try this:

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

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

As, @Marco Johannesen says, the "body" before the selector is so that it takes a higher priority than the default.

正如@Marco Johannesen 所说，选择器之前的“主体”使其具有比默认值更高的优先级。

回答by Tum

In Bootstrap 3+ the most appropriate way to change the size of a modal dialog is to use the size property. Below is an example, notice the modal-smalong the modal-dialogclass, indicating a small modal. It can contain the values smfor small, mdfor medium and lgfor large.

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

回答by Dave Sag

For Bootstrap 3here's how to do it.

因为Bootstrap 3这里是如何做到这一点。

Add a modal-widestyle to your HTML markup (as adapted from the example in the Bootstrap 3 docs)

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

and add the following CSS

并添加以下 CSS

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

There is no need to override margin-leftin Bootstrap 3to get this to be centered now.

没有必要覆盖margin-left在Bootstrap 3得到这个现在被居中。

回答by Alupotha

In Bootstrap 3all you need is this

在Bootstrap 3 中，你只需要这个

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

Most of the above answers did not worked for me !!!

以上大部分答案对我都没有用！！！

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

回答by Roman

Solution was taken from thispage

解决方案来自此页面

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

回答by Dave

In v3 of Bootstrap there is a simple method to make a modal larger. Just add the class modal-lgnext to modal-dialog.

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

回答by user2823201

Bootstrap 3: In order to maintain responsive features for small and extra small devices I did the following:

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

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