Fatal编程技术网
  • modal-dialog/
  • Modal dialog 如何垂直对齐引导v4模式对话框

Modal dialog 如何垂直对齐引导v4模式对话框

bootstrap-4

Modal dialog 如何垂直对齐引导v4模式对话框,modal-dialog,flexbox,bootstrap-modal,vertical-alignment,bootstrap-4,Modal Dialog,Flexbox,Bootstrap Modal,Vertical Alignment,Bootstrap 4,引导程序4中的模态对话垂直居中 注意：添加了以下要求，以明确我正在寻找一种适当的方法来垂直居中引导模式，覆盖所有可能的情况，在所有可能的设备上，在所有浏览器中。在我的例子中，我希望它能在整个应用程序中重复使用相同的模式，因此我需要它在每种情况下都能工作 它应当： 在所有设备上保持模态内容可访问，即使高于设备高度 在市场份额大于1%的任何设备+浏览器组合上工作 不使用显示：表格单元格或类似的破解（任何并非为布局破解而设计的布局破解技术） 关闭单击或点击以外的任何位置。模式内容（包括上面和下面）

引导程序4中的模态对话垂直居中

注意：添加了以下要求，以明确我正在寻找一种适当的方法来垂直居中引导模式，覆盖所有可能的情况，在所有可能的设备上，在所有浏览器中。在我的例子中，我希望它能在整个应用程序中重复使用相同的模式，因此我需要它在每种情况下都能工作

它应当：

  • 在所有设备上保持模态内容可访问，即使高于设备高度
  • 在市场份额大于
    1%的任何设备+浏览器组合上工作
  • 不使用
    显示：表格单元格
    或类似的破解（任何并非为布局破解而设计的布局破解技术）
  • 关闭
    单击
    或
    点击
    以外的任何位置。模式内容
    （包括上面和下面）
  • 尽可能限制jQuery/JavaScript的使用
  • （可选）使用默认引导示例，无需标记修改
更新，从Beta 3开始：

将
.model dialog居中添加到
.model dialog
以垂直居中模式


<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </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>




原始答复：


SCSS
：


.modal对话框{
最小高度：计算（100vh-60px）；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
溢出：自动；
@介质（最大宽度：768px）{
最小高度：计算（100vh-20px）；
}
}


或不固定
CSS
：


.modal对话框{
最小高度：计算（100vh-60px）；
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
溢出：自动；
}
@介质（最大宽度：768px）{
.模态对话框{
最小高度：计算（100vh-20px）；
}
}


注意1:请注意，随着浏览器对某些属性的支持发生变化，完全带前缀的CSS逐渐过时。获取更新的前缀CSS的正确方法是：


    

  • 将未固定的CSS复制/粘贴到
    • 

  • 将底部框中的过滤器设置为所需设置（对于最大浏览器支持，请使用
    >0%
    ）
    • 

  • 从右边的框中获取最新代码。

    • 


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


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


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

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

$（'.modal dialog'）。在（'点击'，函数（e）上{
if（$（e.target）.hasClass（'modal-dialog'））{
$（'.modal'）.modal（'hide'）；
}
})
就这样

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

$（'.modal dialog'）。在（'点击'，函数（e）上{
if（$（e.target）.hasClass（'modal-dialog'））{
$（'.modal'）.modal（'hide'）；
}
})
.modal对话框{
最小高度：-webkit计算（100vh-60px）；
最小高度：-moz计算（100vh-60px）；
最小高度：计算（100vh-60px）；
显示：-网络工具包盒；
显示：-webkit flex；
显示器：-moz盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-webkit柔性方向：列；
-莫兹盒方向：垂直；
-莫兹盒方向：正常；
-ms-flex方向：列；
弯曲方向：立柱；
-webkit盒包：中心；
-webkit内容：中心；
-莫兹盒包装：中心；
-ms-flex-pack:center；
证明内容：中心；
溢出：自动；
}
@介质（最大宽度：768px）{
.模态对话框{
最小高度：-webkit计算（100vh-20px）；
最小高度：-moz计算（100vh-20px）；
最小高度：计算（100vh-20px）；
}
}
/*你不需要这行下面的CSS。它主要是装饰性的，用于对齐模式启动按钮*/
.模态内容{
显示：-网络工具包盒；
显示：-webkit flex；
显示器：-moz盒；
显示：-ms flexbox；
显示器：flex；
-网络工具包盒方向：垂直；
-webkit盒方向：正常；
-webkit柔性方向：列；
-莫兹盒方向：垂直；
-莫兹盒方向：正常；
-ms-flex方向：列；
伸缩方向：列；}
.模态内容>*{
-webkit-box-flex:0；
-webkit flex:0 0自动；
-moz-box-flex:0；
-ms-flex:0自动；
flex:0自动；
}
.模态内容>*.模态正文{
-webkit-box-flex:1；
-webkit-flex-grow:1；
-moz-box-flex:1；
-ms-flex阳性1例；
柔性生长：1；
}
#模态2.模态内容{
最小高度：50vh；
}
#模态_3.模态内容{
最低高度：85vh；
}
#情态4.情态内容{
最低高度：200vh；
}
.整版中心{
显示：-网络工具包盒；
显示：-webkit flex；
显示器：-moz盒；
显示：-ms flexbox；
显示器：flex；
-webkit盒包：中心；
-webkit内容：中心；
-莫兹盒包装：中心；
-ms-flex-pack:center；
证明内容：中心；
-webkit框对齐：居中；
-webkit对齐项目：居中；
-moz框对齐：居中；
-ms-flex-align：居中；
对齐项目：居中；
最小高度：100vh；
}
.整页中央按钮{
利润率：15px；
}
@介质（最大宽度：768px）{
.整版中心{
-webkit柔性包装：包装；
-ms-flex-wrap:wrap；
柔性包装：包装；
}
.整页中央按钮{
显示：块；
最小宽度：100%；
利润率：10px 15px；
}
.整页中心：：之后{
显示：无；
-webkit-box-flex:0；
-webkit-flex-grow:0；
-moz-box-flex:0；
-ms-flex阳性：0；
flex-grow:0；
}
}

微小模态
正常模态
大模态
很大的

.modal > .row{
    flex: 1;
}



<div id="dialogBox" class="modal fade d-flex">
    <div class="row justify-content-center"> <!-- Vertically Align Modal -->
        <div class="modal-dialog align-self-center" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>



$("#dialogBox").modal('show');



<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#dialogBox">
  Launch demo modal
</button>



<div id="dialogBox" class="modal fade d-flex">
    <div class="row justify-content-center w-100"> <!-- Vertically Align Modal -->
        <div class="modal-dialog align-self-center" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title">Modal title</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    <p>Modal body text goes here.</p>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-primary">Save changes</button>
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                </div>
            </div>
        </div>
    </div>
</div>



.modal-header {
  flex-shrink: 0;
}

.modal-body {
  overflow-y: auto;
}



<div class="modal-dialog h-100 my-0 mx-auto d-flex flex-column justify-content-center" role="document">
  <div class="modal-content m-2">
     ...
  </div>
</div>



<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  Launch demo modal
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLongTitle">Modal title</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        ...
      </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>



.modal-dialog {
      height: 100vh;
      display: flex;
      align-items: center;
}



<div class="modal-dialog modal-dialog-centered" role="document">



::ng-deep{
    .modal-body{
        padding: 0.25rem;
        width: 600px !important;
    }
    .modal-content {
        position: relative;
        display: flex;
        flex-direction: row;
        margin-top: auto;
        margin-bottom: auto;
        width: 600px !important;
      }
}