那些遇到过的问题

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

And*_*hiu 21 modal-dialog vertical-alignment flexbox bootstrap-modal bootstrap-4

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

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

这应该:

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

And*_*hiu 61

更新,截至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);
  }
}
Run Code Online (Sandbox Code Playgroud)

或者没有前缀 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);
  }
}
Run Code Online (Sandbox Code Playgroud)

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

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

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

h-100 d-flex flex-column justify-content-center my-0
Run Code Online (Sandbox Code Playgroud)

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

jQuery (需要在点击/点击上方/下方关闭模式):

$('.modal-dialog').on('click tap', function(e){
  if ($(e.target).hasClass('modal-dialog')) {
    $('.modal').modal('hide');
  }
})
Run Code Online (Sandbox Code Playgroud)

而已.

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

$('.modal-dialog').on('click tap', function(e){
  if ($(e.target).hasClass('modal-dialog')) {
  	$('.modal').modal('hide');
  }
})
Run Code Online (Sandbox Code Playgroud) 
.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;
  }
}
Run Code Online (Sandbox Code Playgroud) 
<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-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_3">Don't call me fat</h4>
      </div>
      <div class="modal-body">
        Call me "oversized".
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-success">Some action</button>
      </div>
    </div>
  </div>
</div>
<div class="modal fade" id="Modal_4" tabindex="-1" role="dialog" aria-labelledby="modalLabel_4" 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_4">Huge modal</h4>
      </div>
      <div class="modal-body">
        Comments, anyone?
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" class="btn btn-warning">Some action</button>
      </div>
    </div>
  </div>
</div>
Run Code Online (Sandbox Code Playgroud)

如果您发现任何错误或缺点,请告诉我.我会花时间改进答案并保持有用.欢迎帮助完成此任务.

  • 这也可以使用Bootstrap 4的内置类来完成:`div class ="modal-dialog h-100 d-flex flex-column justify-content-center my-0"`让我避免使用`calc`和媒体查询. (5认同)
  • 从Bootstrap 4 beta 2开始,点击上方/下方时不再需要JavaScript关闭.请参阅https://github.com/twbs/bootstrap/pull/22704 (4认同)

Mut*_*nth 10

只需添加以模态对话框为中心的类以及模型对话框，如下所示

<head>
  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
  <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
  <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
</head>
 <button class="btn btn-success" data-toggle="modal" data-target="#MyModal">Launch Modal</button>     
<div class="modal align-middle" id="MyModal">
    <div class="modal-dialog modal-dialog-centered">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Modal Title</h5>
                <button class="close" data-dismiss="modal">&times;</button>
            </div>
            <div class="modal-body">Lorem Ipsum is simply dummy text of the                        printing and typesetting industry</div> 
            <div class="modal-footer">
                <button class="btn btn-info" data-dismiss="modal">Close</button>
            </div>                
        </div>
    </div>
</div>
Run Code Online (Sandbox Code Playgroud)

Sur*_*S M 8

这是一个简单的Flexbox方法.

SCSS

.modal-open .modal {
    display: flex!important;
    align-items: center!important;
    .modal-dialog {
        flex-grow: 1;
    }
}
Run Code Online (Sandbox Code Playgroud)

工作演示

小智 5

只需使用此类“modal-dialog-centered”即可在屏幕中心垂直显示模态。

例如：

<div class="modal-dialog modal-dialog-centered" role="document">
Run Code Online (Sandbox Code Playgroud)

谢谢

归档时间：

查看次数：

41447 次

最近记录：

6 年，5 月 前
如何为所有浏览器垂直居中div？ 1310
Twitter Bootstrap - 如何水平或垂直居中元素 282
Bootstrap 4中心垂直和水平对齐 126
如何使用CSS垂直集中Bootstrap V4模式？ 7
更多相关链接
相关归档
垂直文本方向 95
如何计算连续的flexbox项目数量？ 47
Bootstrap - 对齐按钮到卡的底部 45
Flex盒容器宽度不会增长 15
工具提示弹出框内的 Bootstrap 输入字段从输出 html 中删除 9
我如何动画显示：弹性项目上的无/块属性？ 5
使用 Flexbox 将特定元素居中 3
防止模态关闭 2
锁定自举模式到右下角？ 0
如何在bootstrap和css中让渐变占据全屏？ 0
难疑归档
在Python中调用外部命令 4553
了解切片表示法 3024
如何在Java中声明和初始化数组？ 1946
原子和非原子属性之间有什么区别？ 1828
什么是移动语义？ 1614
如何在Bash中将变量设置为命令的输出？ 1513
如何确定Python变量的类型？ 1437
将文件从主机复制到Docker容器 1391
<meta http-equiv ="X-UA-Compatible"content ="IE = edge">是做什么用的？ 1378
如果我已经开始使用rebase,如何将两个提交合并为一个？ 1111