首页 文章

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

提问于
浏览 次
369

我尝试了以下方法：

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

结果不是我的预期 . 模态左上方位于屏幕中央 .

谁能帮我 . 有没有人试过这个 . 我认为这不是一件不寻常的事情 .

javascript jquery twitter-bootstrap-2

30 回答

  • 79

    UPDATE:

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

    Original Answer (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 .

    回复于
  • 0

    如果你想让它只用CSS响应，请使用：

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

    注1：我使用了 .large 类，你也可以在正常 .modal 上执行此操作

    注2：在Bootstrap 3中，可能不再需要使用负边距 (not confirmed personally)

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

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

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

    回复于
  • 4

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

    请参阅this 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) */
    }
}
    回复于
  • 15

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

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

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

    回复于
  • 2

    在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>
    回复于
  • 3

    对于 Bootstrap 3 ，这是如何做到的 .

    在您的HTML标记中添加 modal-wide 样式（改编自the example in the Bootstrap 3 docs）

    <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 以使其立即居中 .

    回复于
  • 369

    在 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>
    回复于
  • 6

    解决方案来自this页面

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

    在Bootstrap的第3版中，有一种简单的方法可以使模态更大 . 只需在模态对话框旁边添加类 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">
    回复于
  • 6

    Bootstrap 3：为了维护小型和小型设备的响应功能，我做了以下工作：

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

    如果Bootstrap> 3，只需为你的模态添加样式 .

    <div class="modal-dialog" style="width:80%;">
  <div class="modal-content">
  </div>
</div>
    回复于
  • 3

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

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

    回复于
  • 0

    这就是我所做的，在我的custom.css中，我添加了这些行，就是这样 .

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

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

    回复于
  • 41

    FYI Bootstrap 3自动处理左侧属性 . 因此，只需添加此CSS将更改宽度并使其保持居中：

    .modal .modal-dialog { width: 800px; }
    回复于
  • 4

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

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

    把事情简单化 .

    回复于
  • 20

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

    .modal-dialog {
    width: 70%;
}
    回复于
  • 2

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

    CSS

    #alertModal .modal-dialog{
     width: 20%;
}
    回复于
  • 2

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

    回复于
  • 2

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

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

    这样可以确保您不使用 .modal-dialog 而不是 .modal ，它甚至会应用于着色 .

    回复于
  • 7

    尝试类似下面的内容（请参阅此处的实时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>​
    回复于
  • 1

    我发现使用已经内置到引导程序中的列和其他响应元素可以获得更多控制，而不是使用百分比来使模式响应 .

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

    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>
    回复于
  • 0

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

    .popover{
         width:auto !important; 
         max-width:445px !important; 
         min-width:200px !important;
       }
    回复于
  • 3

    使用下面的脚本：

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

  overflow-y: scroll;
}

    Demo ：

    Demo on gif

    回复于
  • 17

    使用，达到预期的结果，

    .modal-dialog {
    width: 41% !important;
}
    回复于
  • 0

    我为Bootstrap 4.1解决了这个问题

    混合以前发布的解决方案

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

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

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

    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);
}
    回复于
  • 1

    我使用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; }
}
    回复于
  • 267
    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;
        }
    回复于
  • 34

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

    $（'＃openModalPopupId'） . css（{“width”：“80％”，“left”：“30％”}）;

    回复于

相关问题