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

Bootstrap 前端之家
前端之家收集整理的这篇文章主要介绍了模态对话框 – 如何垂直对齐Bootstrap v4模式对话框，前端之家小编觉得挺不错的，现在分享给大家，也给大家做个参考。
Bootstrap 4中的垂直中心模态对话.

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

这应该：

>在所有设备上保持模态内容可访问,即使高于设备高度也是如此
>在任何设备浏览器组合上工作,市场份额大于1％
>不使用display：table-cell或类似的hacks(任何布局技术并不意味着或设计用于布局)
>点击或点击.modal-content之外的任何地方(包括上方和下方).
>尽可能限制jQuery / JavaScript的使用
>(可选)处理默认的Bootstrap示例,无需进行标记修改

解决方法

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

Add .modal-dialog-centered to .modal-dialog to vertically center the modal.

原始答案：

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(请参见下文)关闭模式窗口下方/上方的点击模式窗口.

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-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>

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

原文链接：https://www.f2er.com/bootstrap/234143.html

猜你在找的Bootstrap相关文章

使用BootStrapValidator来完成前端输入验证
BootStrapValidator可以用于完成基于BootStrap搭建的前端UI中的输入验证，由于本插件完全基...
顶求网首页整体设计思路
顶求网首页是一个web2.0博客类的网站首页，在该网站中用户可以发表博客，也可以推荐图书给...
自己手写简约实用的Jquery tabs插件（基于bootstrap环境）
一直想改版网站首页的图书展示部分，以前的展示是使用BootStrap的传统的collapse,网页篇幅...
BootStrap中Affix控件的使用方法及如何保持布局的美观
在视窗足够大的时候是没有任何问题的，但是当拖动改变视窗的大小后会发现布局又变乱了，这...
针对BootStrap中tabs控件的美化和完善
BootStrap中的tabs控件以其简单易用而很受广大开发者的欢迎。但是，它的样式比较单一，如何...
使用BootStrap制作用户登录UI
先看看劳动成果 布局 左右各一半（col-md-6） 左侧登录框占左侧一半的10/12 右侧是登录系统...
打造简单实用的Thinkphp分页样式(Bootstrap版本)
先吐槽一下ThinkPHP3.1版的分页样式，虽然看起来也很简单大方，但是所有的页码全是使用简单...
Bootstrap轮播（carousel）插件中图片变形的终极解决方案——使用jqthumb.js
在顶求网的首页中我使用了BootStrap的轮播（carousel）插件来展示文章中的图片。我在程序中...
移动开发中单页异步加载所有列表项
在做WEB开发的时候我们经常会遇到分页的处理，如果在PC上显示网页的话，使用传统的分页是可...
仿豆瓣分类标签的实现
为了和文章分类部分的样式进行区分，我决定自己动手写一个具有其他样式的分类标签集。刚好...
HTMLHTML5JavaScriptCSSjQueryBootstrapAngularjsTypeScriptVueDojoJsonElectronNode.jsextjsExpress XMLES6AjaxFlashUnityReactFlexAnt DesignWeb前端微信小程序微信公众号
关闭广告单独headers封装代码提示错误整数正则非0开头跳页出页码antd table提示URL未注册公众号支付vue hash模式iSlider车牌键盘循环图片echarts 双折左右布局DllPlugin对象创建打字游戏圈选两栏云函数蒙版ES2020橱窗无缝滚动轮播色块碰撞组件销毁文档操作