如何垂直对齐Bootstrap v4模式对话框

Posted 2023-02-01

Bootstrap 4中的垂直中心模态对话框。

注意：添加了以下要求以明确我正在寻找一种适当的方法来垂直居中Bootstrap模式，涵盖所有可能的设备，在所有浏览器中。在我的情况下，我想要一个大型SPA在整个应用程序中重用相同的模式，所以我需要它在每种情况下工作。

这应该：

• 即使在高于设备高度的情况下，也可以在所有设备上访问模态内容
• 适用于任何设备+浏览器组合，市场份额大于1%
• 不使用display:table-cell或类似的黑客（任何布局技术并不意味着或设计用于布局）
• 在click以外的任何地方（包括上方和下方）靠近tap或.modal-content。
• 尽可能限制jQuery / javascript的使用
• （可选）处理默认的Bootstrap示例，无需进行标记修改

答案

更新，截至Beta 3，[docs]：

将.modal-dialog-centered添加到.modal-dialog以垂直居中模态。

---

原始答案：

SCSS：

.modal-dialog 
  min-height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: auto;
  @media(max-width: 768px) 
    min-height: calc(100vh - 20px);
  

或没有前缀的CSS：

.modal-dialog 
    min-height: calc(100vh - 60px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: auto;

@media(max-width: 768px) 
  .modal-dialog 
    min-height: calc(100vh - 20px);
  

注1：请注意，完全加前缀的CSS逐渐变得过时，因为某些属性的浏览器支持会发生变化。获取更新的前缀CSS的正确方法是：

• 将未加前缀的CSS复制/粘贴到Autoprefixer中。
• 将底部框中的过滤器设置为所需的设置（最大浏览器支持使用> 0%）。
• 从右侧的框中获取最新代码。

注2：这个答案是在v4（alpha 3或4）的早期阶段添加的，现在处于测试阶段。您可以通过将以下类添加到.modal-dialog来安全地替换此答案的CSS部分：

h-100 d-flex flex-column justify-content-center my-0

......，正如@Androbaut在下面的评论中指出的那样。您仍然需要JavaScript（见下文）来关闭模态窗口下方/上方的click tap上的模态窗口。

---

jQuery（需要在点击/点击上方/下方关闭模式）：

$('.modal-dialog').on('click tap', function(e)
  if ($(e.target).hasClass('modal-dialog')) 
    $('.modal').modal('hide');
  
)

而已。

---

使用不同模式大小的工作代码段，完全带前缀的CSS和标记：

$('.modal-dialog').on('click tap', function(e)
  if ($(e.target).hasClass('modal-dialog')) 
  	$('.modal').modal('hide');
  
)

.modal-dialog 
  min-height: -webkit-calc(100vh - 60px);
  min-height: -moz-calc(100vh - 60px);
  min-height: calc(100vh - 60px);
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  overflow: auto; 

@media (max-width: 768px) 
  .modal-dialog 
    min-height: -webkit-calc(100vh - 20px);
    min-height: -moz-calc(100vh - 20px);
    min-height: calc(100vh - 20px);   
  


/* you don't need the CSS below this line. It's mainly cosmetic and for aligning the modal launch buttons */

.modal-content 
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
  -webkit-flex-direction: column;
     -moz-box-orient: vertical;
     -moz-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column; 
.modal-content > * 
  -webkit-box-flex: 0;
  -webkit-flex: 0 0 auto;
     -moz-box-flex: 0;
      -ms-flex: 0 0 auto;
          flex: 0 0 auto; 

.modal-content > *.modal-body 
  -webkit-box-flex: 1;
  -webkit-flex-grow: 1;
     -moz-box-flex: 1;
      -ms-flex-positive: 1;
          flex-grow: 1; 


#Modal_2 .modal-content 
  min-height: 50vh; 


#Modal_3 .modal-content 
  min-height: 85vh; 


#Modal_4 .modal-content 
  min-height: 200vh; 


.full-page-center 
  display: -webkit-box;
  display: -webkit-flex;
  display: -moz-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
     -moz-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
     -moz-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  min-height: 100vh; 

.full-page-center button 
  margin: 15px; 

@media (max-width: 768px) 
  .full-page-center 
    -webkit-flex-wrap: wrap;
        -ms-flex-wrap: wrap;
            flex-wrap: wrap;   
  
  .full-page-center button 
    display: block;
    min-width: 100%;
    margin: 10px 15px;
  
  .full-page-center::after 
    display: none;
    -webkit-box-flex: 0;
    -webkit-flex-grow: 0;
       -moz-box-flex: 0;
        -ms-flex-positive: 0;
            flex-grow: 0;
  

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://npmcdn.com/tether@1.2.4/dist/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/js/bootstrap.min.js"></script>


<div class="container full-page-center">
  <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#Modal_1">
    Tiny modal
  </button>
  <button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#Modal_2">
    Normal modal
  </button>
  <button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#Modal_3">
    Large modal
  </button>
  <button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#Modal_4">
    Very large modal
  </button>
</div>
<div class="modal fade" id="Modal_1" tabindex="-1" role="dialog" aria-labelledby="modalLabel_1" aria-hidden="true">
  <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="modalLabel_1">Tiny modal</h4>
      </div>
      <div class="modal-body">
        I am cute...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Save changes</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="Modal_2" tabindex="-1" role="dialog" aria-labelledby="modalLabel_2" aria-hidden="true">
  <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="modalLabel_2">Dull modal</h4>
      </div>
      <div class="modal-body">
        I am normal...
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-primary">Some action</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="Modal_3" tabindex="-1" role="dialog" aria-labelledby="modalLabel_3" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-c
以上是关于如何垂直对齐Bootstrap v4模式对话框的主要内容，如果未能解决你的问题，请参考以下文章
 
 如何在 Bootstrap v4 中制作两个相邻的表格，它们之间有垂直按钮
 Bootstrap：如何将按钮组居中对齐（垂直）
 Bootstrap 3 / CSS：如何在面板标题中正确垂直对齐
 Bootstrap如何让文本在div容器中垂直对齐
 如何在 Bootstrap 4 中垂直对齐导航栏切换器？
 Bootstrap 3按钮垂直对齐没有空间