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

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.

谁能帮助我。还有其他人尝试过吗?我想这不是一件不寻常的事。

30 个解决方案

#1

UPDATE:

更新:

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

在bootstrap 3中，您需要更改modal对话框。在这种情况下，你可以在modal-dialog所在的位置添加类modal-admin。

Original Answer (Bootstrap < 3)

原始答案(Bootstrap < 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文件中，而无需担心更新引导。

#2

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 .large class, 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-lg class. 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 fixed modals are used, in that case you could try width:80%; left:10%; (formula: left = 100 - width / 2)

在某些应用程序中使用了固定的模式，在这种情况下你可以尝试宽度:80%;左:10%;(公式:左= 100 -宽度/ 2)

#3

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，则需要更改modal-dialog div，而不是如所接受的答案中所示的modal div。此外，为了保持Bootstrap 3的响应性，使用媒体查询编写重写CSS非常重要，这样在较小的设备上的模态将是全宽的。

See this JSFiddle to 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) */
    }
}

#4

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所说，选择器之前的“主体”是为了它比默认的优先级更高。

#5

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-sm along the modal-dialog class, indicating a small modal. It can contain the values sm for small, md for medium and lg for large.

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

#6

For Bootstrap 3 here's how to do it.

对于Bootstrap 3，这里有一些方法。

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

在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-left in Bootstrap 3 to get this to be centered now.

没有必要重写Bootstrap 3中的margin-left，以使它现在集中。

#7

In Bootstrap 3 all you need is this

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

#8

Solution was taken from this page

解决方案从这一页

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

#9

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 */ }
}

#10

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

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

#11

If Bootstrap>3, Just add style to your modal.

如果引导>3，只需添加样式到你的模式。

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

#12

I've found this solution that works better for me. You can use this:

我找到了对我更有效的解决方案。您可以使用:

$('.modal').css({
  'width': function () { 
    return ($(document).width() * .9) + 'px';  
  },
  'margin-left': function () { 
    return -($(this).width() / 2); 
  }
});

or this depending your requirements:

或视乎你的需要而定:

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

See the post where I found that: https://github.com/twitter/bootstrap/issues/675

请参阅我发现的文章:https://github.com/twitter/bootstrap/issues/675

#13

This is what I did, in my custom.css I added these lines and that was all.

按照我的习惯，我就是这么做的。css我添加了这些线，这就是全部。

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

Obviously, you can change the size of the width.

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

#14

FYI Bootstrap 3 handles the left property automatically. So simply adding this CSS will change the width and keep it centered:

FYI Bootstrap 3自动处理左属性。所以只要添加这个CSS就会改变宽度并保持居中:

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

#15

Preserve the responsive design, set the width to what you desire.

保持响应性设计，设置你想要的宽度。

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

Keep it simple.

保持简单。

#16

Altering the class model-dialog you can achieve expected result. These small tricks work for me. Hope it will help you to solve this issue.

更改类模型-对话框可以实现预期的结果。这些小把戏对我很管用。希望它能帮助你解决这个问题。

.modal-dialog {
    width: 70%;
}

#17

Try something like the following (see live jsfiddle example here: http://jsfiddle.net/periklis/hEThw/1/)

尝试以下内容(请参阅下面的实时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>​

#18

With Bootstrap 3, all that is required is a percentage value given to the modal-dialog via CSS

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

CSS

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

#19

I used a combination of CSS and jQuery, along with hints on this page, to create a fluid width and height using Bootstrap 3.

我使用了CSS和jQuery的结合，以及本页面的提示，使用Bootstrap 3创建一个流畅的宽度和高度。

First, some CSS to handle the width and optional scrollbar for the content area

首先，一些CSS来处理内容区域的宽度和可选的滚动条

.modal.modal-wide .modal-dialog {
  width: 90%;
}
.modal-wide .modal-body {
  overflow-y: auto;
}

And then some jQuery to adjust the height of the content area if needed

然后使用jQuery调整内容区域的高度

$(".modal-wide").on("show.bs.modal", function() {
  var height = $(window).height() - 200;
  $(this).find(".modal-body").css("max-height", height);
});

Full write-up and code at http://scottpdawson.com/development/creating-a-variable-width-modal-dialog-using-bootstrap-3/

在http://scottpdawson.com/development/creating-a-variable-width- modals -dialog-using-bootstrap-3/上进行完整的编写和代码

#20

In Bootstrap 3 with CSS you can simply use:

在使用CSS的Bootstrap 3中，您可以简单地使用:

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

This ensures you don't break the design of the page, because we're using .modal-dialog instead of .modal which will be applied even to the shading.

这将确保您不会破坏页面的设计，因为我们使用的是。modal-dialog而不是。modal，它甚至可以应用到阴影中。

#21

Rather than using percentages to make the modal responsive, I find there can be more control taken from using the columns and other responsive elements already built into bootstrap.

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

---

To make the modal responsive/the size of any amount of columns:

1) Add an extra div around the modal-dialog div with a class of .container -

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

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

2) Add a little CSS to make the modal full width -

2)添加一点CSS，使模态全宽-

.modal-dialog {
    width: 100% }

3) Alternatively add in an extra class if you have other modals -

如果你有其他的modals -，也可以添加一个额外的类

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

.modal-responsive.modal-dialog {
    width: 100% }

4) Add in a row/columns if you want various sized modals -

4)添加行/列，如果你想要各种大小的modals -

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

#22

Add the following on your css file

在css文件中添加以下内容

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

#23

Achieved expected result using,

取得了预期的结果,

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

#24

I used this way, and it's work perfect for me

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

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

#25

Less-based solution (no js) for Bootstrap 2:

基于小样本的Bootstrap解决方案(no 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; }
    }
}

Then wherever you want to specify a modal width:

然后，无论您想指定哪个模态宽度:

#myModal {
    .modal-width(700px);
}

#26

I used SCSS, and the fully responsive modal:

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

#27

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

or

或

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

#28

Below is the code for set the modal pop-up width and left position from the screen through javascript.

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

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

$(" # openModalPopupId”)。css({“宽度”:“80%”，“左”:“30%”);

#29

Bootstrap 3.x.x

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>

Notice I added .employeeModal class in second div. Then style that class.

注意，我在第二个div中添加了。employeemodal类。

.employeeModal{
        width: 700px;
    }

#30

.Size(ModalSize.Large)

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