bootstrap模态框居中_简述bootstrap中模态框的javascript方法

在Bootstrap项目中，让模态框居中显示是一个常见的需求。默认情况下，模态框是垂直居中的，但有时我们需要确保它在各种屏幕尺寸下都能完美居中。接下来我将介绍几种实现模态框居中的解决方案。

1. 使用Bootstrap内置类

最简单的方法是使用Bootstrap自带的.modal-dialog-centered类。只需将这个类添加到模态框容器中即可：

html
<!-- 按钮触发模态框 --></p>

<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  居中模态框
</button>

<p><!-- 模态框 --></p>

<div class="modal fade" id="exampleModalCenter" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">居中模态框标题</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">×</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
        <button type="button" class="btn btn-primary">保存</button>
      </div>
    </div>
  </div>
</div>

<p>

2. 自定义CSS样式

如果你需要更精确地控制居中效果，可以通过自定义CSS来实现：

css
.modal-custom {
  display: flex;
  align-items: center;
  justify-content: center;
}</p>

<p>.modal-dialog-custom {
  margin: 0;
}

然后在HTML中应用这些类：

html</p>

<div class="modal fade modal-custom" id="exampleModalCustom" role="dialog" aria-labelledby="exampleModalCustomTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-custom" role="document">
    <!-- 内容同上 -->
  </div>
</div>

<p>

3. 使用JavaScript动态调整

对于需要根据内容高度动态调整的情况，可以使用JavaScript：

javascript
function centerModal() {
  $('.modal').each(function(i) {
    var $clone = $(this).clone().css('display', 'block').appendTo('body');
    var top = Math.round(($clone.height() - $clone.find('.modal-dialog').height()) / 2);
    if (top < 0) top = 0;
    $clone.remove();
    $(this).data('top', top); // store the calculated value
  });
}</p>

<p>$('.modal').on('shown.bs.modal', function() {
  $(this).css('margin-top', $(this).data('top'));
});</p>

<p>// 初始化时调用一次
centerModal();</p>

<p>// 窗口大小改变时重新计算
$(window).resize(centerModal);

以上三种方法都可以实现模态框居中显示的效果。种方法最为简单，推荐用于大多数场景；第二种方法适合需要自定义样式的场景；第三种方法则更适合需要动态调整的情况。选择哪种方法取决于具体的需求和项目要求。