我如何改变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')

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

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

当前回答

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

$('.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-08 01:56:04

其他回答

尝试以下内容(参见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>

2012-04-16 06:22:20

如果你正在使用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-01 17:02:50

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

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

2013-09-02 14:49:37

达到预期效果使用，

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

2016-08-05 14:16:00

在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-23 07:11:20

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

推荐文章

最新文章

标签