如何垂直对齐 Bootstrap v4 模态对话框 [英] How to vertically align Bootstrap v4 modal dialogs

问题描述

在 Bootstrap 4 中垂直居中模式对话.

注意:添加以下要求是为了清楚地表明我正在寻找一种正确方法来垂直居中 Bootstrap 模式，涵盖所有可能的情况，在所有可能的设备上，在所有浏览器中.就我而言，我希望它用于在整个应用程序中重复使用相同模式的大型 SPA，因此我需要它在每种情况下都能正常工作.

应该:

• 保持模式内容可访问，在所有设备上，即使高于设备高度
• 适用于市场份额超过 1% 的任何设备 + 浏览器组合
• 不要使用 display:table-cell 或类似的技巧(任何不是为布局设计的布局技术)
• 在 .modal-content 之外的任何位置(包括上方和下方)关闭 click 或 tap.
• 尽可能限制 jQuery/JavaScript 的使用
• (可选)处理默认 Bootstrap 示例，无需标记修改

解决方案

更新，从 Beta 3 开始，[文档]:

<块引用>

将 .modal-dialog-centric 添加到 .modal-dialog 以使模态垂直居中.

<小时>

原答案:

SCSS:

.modal-dialog {最小高度:计算(100vh - 60px)；显示:弹性；弹性方向:列；对齐内容:居中；溢出:自动；@media(最大宽度:768px){最小高度:计算(100vh - 20px)；}}

或无前缀 CSS:

.modal-dialog {最小高度:计算(100vh - 60px)；显示:弹性；弹性方向:列；对齐内容:居中；溢出:自动；}@media(最大宽度:768px){.modal-dialog {最小高度:计算(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('隐藏');}})

就是这样.

<小时>

工作片段、全前缀 CSS 和使用不同模态大小的标记:

$('.modal-dialog').on('click tap', function(e){if ($(e.target).hasClass('modal-dialog')) {$('.modal').modal('隐藏');}})

.modal-dialog {最小高度:-webkit-calc(100vh - 60px);最小高度:-moz-calc(100vh - 60px);最小高度:计算(100vh - 60px)；显示:-webkit-box；显示:-webkit-flex；显示:-moz-box；显示:-ms-flexbox；显示:弹性；-webkit-box-orient:垂直；-webkit-box-direction:正常；-webkit-flex-direction: 列；-moz-box-orient:垂直；-moz-box-direction:正常；-ms-flex-direction: 列；弹性方向:列；-webkit-box-pack: 中心；-webkit-justify-content:中心；-moz-box-pack:中心；-ms-flex-pack:居中；对齐内容:居中；溢出:自动；}@media(最大宽度:768px){.modal-dialog {最小高度:-webkit-calc(100vh - 20px);最小高度:-moz-calc(100vh - 20px);最小高度:计算(100vh - 20px)；}}/* 您不需要此行下方的 CSS.它主要是装饰性的，用于对齐模式启动按钮 */.modal-content {显示:-webkit-box；显示:-webkit-flex；显示:-moz-box；显示:-ms-flexbox；显示:弹性；-webkit-box-orient:垂直；-webkit-box-direction:正常；-webkit-flex-direction: 列；-moz-box-orient:垂直；-moz-box-direction:正常；-ms-flex-direction: 列；弹性方向:列；}.modal-content >* {-webkit-box-flex: 0;-webkit-flex:0 0 自动；-moz-box-flex: 0;-ms-flex:0 0 自动；弹性:0 0 自动；}.modal-content >*.modal-body {-webkit-box-flex: 1;-webkit-flex-grow: 1;-moz-box-flex: 1;-ms-flex-positive: 1;弹性增长:1；}#Modal_2 .modal-content {最小高度:50vh；}#Modal_3 .modal-content {最小高度:85vh；}#Modal_4 .modal-content {最小高度:200vh；}.full-page-center {显示:-webkit-box；显示:-webkit-flex；显示:-moz-box；显示:-ms-flexbox；显示:弹性；-webkit-box-pack: 中心；-webkit-justify-content:中心；-moz-box-pack:中心；-ms-flex-pack:居中；对齐内容:居中；-webkit-box-align:居中；-webkit-align-items:居中；-moz-box-align:居中；-ms-flex-align:居中；对齐项目:居中；最小高度:100vh；}.full-page-center 按钮 {边距:15px；}@media(最大宽度:768px){.full-page-center {-webkit-flex-wrap:包裹；-ms-flex-wrap:包裹；flex-wrap: 包裹;}.full-page-center 按钮 {显示:块；最小宽度:100%；边距:10px 15px；}.full-page-center::after {显示:无；-webkit-box-flex: 0;-webkit-flex-grow: 0;-moz-box-flex: 0;-ms-flex-positive: 0;弹性增长:0；}}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.5/css/bootstrap.min.css" rel="样式表"/><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">小模态<button type="button" class="btn btn-default btn-lg" data-toggle="modal" data-target="#Modal_2">正常模态<button type="button" class="btn btn-success btn-lg" data-toggle="modal" data-target="#Modal_3">大模态<button type="button" class="btn btn-warning btn-lg" data-toggle="modal" data-target="#Modal_4">非常大的模态

<div class="modalfade" 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><h4 class="modal-title" id="modalLabel_1">小模态</h4>

<div class="modal-body">我很可爱...

<div class="modal-footer"><button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button><button type="button" class="btn btn-primary">保存更改</button>