模态对话框 – 如何垂直对齐Bootstrap v4模式对话框
Bootstrap 4中的垂直中心模态对话.
注意:添加了下面的要求以明确我正在寻找一种适当的方法来垂直居中Bootstrap模式,涵盖所有可能的设备,在所有浏览器中.在我的情况下,我想要一个大型SPA在整个应用程序中重用相同的模式,所以我需要它在每种情况下工作. 这应该: >在所有设备上保持模态内容可访问,即使高于设备高度也是如此 解决方法
更新,截至Beta 3,[docs]:
原始答案: 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中. 注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">×</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">×</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">×</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">×</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> 如果您发现任何错误或缺点,请告诉我.我会花时间改进答案并保持有用.欢迎帮助完成此任务. (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |