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

问题描述

Bootstrap中的垂直中心模式对话框应该：

• 即使在设备高度高于所有设备的情况下，


• 适用于市场份额大于 1％


• 的任何设备+不要使用 display：table-cell 或类似的黑客（任何布局技术都不是为了布局而设计的）。
  
• 工作无需标记修改


• 关闭点击的默认Bootstrap示例或 tap .modal-content 之外


• 限制jQuery /尽可能多的JavaScript

解决方案

SCSS .modal-dialog {
min-height：calc（100vh）;

 < -  60px）; 
 display：flex; 
 flex-direction：column; 
 justify-content：center; 
溢出：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; 
溢出：auto; 
 
 @media（max-width：768px）{
 .modal-dialog {
 min-height：calc（100vh  -  20px）; 
 
 
 $ c 
 
 
 
 注1：注意完全带有前缀由于某些属性的浏览器支持更改，因此CSS逐渐过时。获取更新前缀CSS的正确方法是：  
 
 
 
 
将前缀不明的CSS复制/粘贴到 Autoprefixer 。
 
 
将底部框中的过滤器设置为所需的设置（最大浏览器支持使用> 0％）。
 
 
从右侧的框中获取最新的代码。 
 
 
 
 
 
 
 
 
 注2：  v4 （ alpha 3或4 ）目前位于 beta 的阶段。您可以通过将以下类添加到 .modal-dialog ：
 
 
 <$ p $来安全地替换此答案的CSS部分p>  h-100 d-flex flex-column justify-content-center my-0 
  

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

$ b

jQuery （需要关闭点击/点击上方/下方的模态）：
$（$'$'$'$'）$ $（'。modal-dialog'）。on（'click tap'，function（e）{
if （$（e.target）.hasClass（'modal-dialog'））{
$（'。modal'）。modal（'hide'）;
}
}）


就是这样。

---

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

.modal-dialog {min-height：-webkit-calc（100vh - 60像素）; min-height：-moz-calc（100vh - 60px）; min-height：calc（100vh - 60px）;显示：-webkit-box;显示：-webkit-flex;显示：-moz-box;显示：-ms-flexbox;显示：flex; -webkit-box-orient：vertical; -webkit-box-direction：正常; -webkit-flex-direction：column; -moz-box-orient：垂直的; -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;溢出：自动; } @media（max-width：768px）{.modal-dialog {min-height：-webkit-calc（100vh - 20px）; min-height：-moz-calc（100vh - 20px）; min-height：calc（100vh - 20px）; }} / *你不需要这行下面的CSS。它主要是美容和调整模式启动按钮* /。模式内容{display：-webkit-box;显示：-webkit-flex;显示：-moz-box;显示：-ms-flexbox;显示：flex; -webkit-box-orient：vertical; -webkit-box-direction：正常; -webkit-flex-direction：column; -moz-box-orient：垂直的; -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;显示：-webkit-flex;显示：-moz-box;显示：-ms-flexbox;显示：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;最小高度：100vh; }完整的页面中心按钮{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;最小宽度：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：//  < 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 =buttonclass =btn btn-primary btn-lgdata-toggle =modaldata-target =＃Modal_1>微小模式< /按钮> < button type =buttonclass =btn btn-default btn-lgdata-toggle =modaldata-target =＃Modal_2>普通模式< /按钮> < button type =buttonclass =btn btn-success btn-lgdata-toggle =modaldata-target =＃Modal_3>大型模式< /按钮> < button type =buttonclass =btn btn-warning btn-lgdata-toggle =modaldata-target =＃Modal_4>非常大的模式< / button>< / div>< div class =modal fadeid =Modal_1tabindex = - 1role =dialogaria-labelledby =modalLabel_1aria-hidden =真> < div class =modal-dialogrole =document> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modalaria-label =关闭> < span aria-hidden =true>& times;< / span> < /按钮> < h4 class =modal-titleid =modalLabel_1>微小模式< / h4> < / DIV> < div class =modal-body>我很可爱...< / div> < div class =modal-footer> < button type =buttonclass =btn btn-secondarydata-dismiss =modal>关闭< /按钮> < button type =buttonclass =btn btn-primary>保存更改< / button> < / DIV> < / DIV> < / div>< / div>< div class =modal fadeid =Modal_2tabindex = - 1role =dialogaria-labelledby =modalLabel_2aria-hidden =true> ; < div class =modal-dialogrole =document> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modalaria-label =关闭> < span aria-hidden =true>& times;< / span> < /按钮> < h4 class =modal-titleid =modalLabel_2> Dull模式< / h4> < / DIV> < div class =modal-body>我很正常...< / div> < div class =modal-footer> < button type =buttonclass =btn btn-secondarydata-dismiss =modal>关闭< /按钮> < button type =buttonclass =btn btn-primary>某些操作< / button> < / DIV> < / DIV> < / div>< / div>< div class =modal fadeid =Modal_3tabindex = - 1role =dialogaria-labelledby =modalLabel_3aria-hidden =true> ; < div class =modal-dialogrole =document> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modalaria-label =关闭> < span aria-hidden =true>& times;< / span> < /按钮> < h4 class =modal-titleid =modalLabel_3>不要叫我胖< / h4> < / DIV> < div class =modal-body>叫我超大。 < / DIV> < div class =modal-footer> < button type =buttonclass =btn btn-secondarydata-dismiss =modal>关闭< /按钮> < button type =buttonclass =btn btn-success>某些操作< / button> < / DIV> < / DIV> < / div>< / div>< div class =modal fadeid =Modal_4tabindex = - 1role =dialogaria-labelledby =modalLabel_4aria-hidden =true> ; < div class =modal-dialogrole =document> < div class =modal-content> < div class =modal-header> < button type =buttonclass =closedata-dismiss =modalaria-label =关闭> < span aria-hidden =true>& times;< / span> < /按钮> < h4 class =modal-titleid =modalLabel_4>巨型模态< / h4> < / DIV> < div class =modal-body>评论，任何人？ < / DIV> < div class =modal-footer> < button type =buttonclass =btn btn-secondarydata-dismiss =modal>关闭< /按钮> < button type =buttonclass =btn btn-warning>某些操作< / button> < / DIV> < / DIV> < / div>< / div>

任何错误或缺点，请让我知道。我会花时间改进答案并保持有用。这个任务的帮助是受欢迎的。

Vertically center modal dialogues in Bootstrap 4. Should:

• keep modal contents accessible, on all devices, even when taller than device height
• work on any device+browser combination with a market share larger than 1%
• not use display:table-cell or similar hacks (any layout-ing technique not meant or designed for layout-ing)
• work on default Bootstrap examples without need of markup modifications
• close on click or tap outside of .modal-content.
• limit usage of jQuery/JavaScript as much as possible

解决方案

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);
  }
}

or unprefixed 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);
  }
}

Note 1: Please note fully prefixed CSS gradually becomes obsolete as browser support for certain properties changes. The right way of getting the updated prefixed CSS is to:

• copy/paste the unprefixed CSS into Autoprefixer.
• set the filter in the bottom box to the desired setting (for max. browser support use > 0%).
• get the latest code from the box on the right.

  ---

Note 2: This answer was added in early stages of v4 (alpha 3 or 4), which is now currently in beta. You can safely replace the CSS part of this answer by adding the following classes to .modal-dialog:

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

..., as pointed out by @Androbaut in the comment below. You will still need the JavaScript (see below) to close the modal window on click tap below/above the modal window.

---

jQuery (needed to close modal on click/tap above/below):

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

That's it.

---

Working snippet, fully-prefixed CSS and markup using different modal sizes:

$('.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-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>

If you find any bugs or shortcomings please let me know. I will take the time to improve the answer and keep it useful. Help with this task is welcome.

这篇关于如何垂直对齐Bootstrap v4模式对话框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！