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

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

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

当前回答

解决方案取自此页

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

2012-07-05 11:03:22

其他回答

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

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

2013-09-02 14:49:37

更新:

在引导3中，你需要改变模式对话框。所以在这种情况下，你可以在modal-dialog所在的位置添加类modal-admin。

原始答案(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。

2012-04-16 06:27:54

修改类模型对话框可以达到预期的结果。这些小技巧对我很有用。希望能帮助你解决这个问题。

.modal-dialog {
    width: 70%;
}

2017-03-15 06:47:43

达到预期效果使用，

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

2016-08-05 14:16:00

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

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

推荐文章

最新文章

标签