前言bootstrap 模态框默认会在屏幕顶端显示,跟我们的操作习惯不太符合,我们期望显示到屏幕垂直居中的位置。 在最新的 bootstrap4 版本中可以在<div class="modal-dialog"> 上加一个 modal-dialog-centered 属性,来垂直居中显示。 但是大部分用的是bootstrap3 版本,需要自己写javascript脚本来调整位置。 bootstrap3 版本bootstrap模态框默认会在屏幕顶端显示,位置太靠上了。
bootstrap3 版本,需要自己写 javascript 脚本来调整位置。 show.bs.modal 在调用 show 方法后触发。 shown.bs.modal 当模态框对用户可见时触发(将等待 CSS 过渡效果完成)。 hide.bs.modal 当调用 hide 实例方法时触发。 hidden.bs.modal 当模态框完全对用户隐藏时触发。
// 作者-上海悠悠 QQ交流群:717225969 // blog地址 https://www.cnblogs.com/yoyoketang/
<script> $('#myModal').on('show.bs.modal', function (e) { var modalHeight=$(window).height() / 2 - $('#myModal .modal-dialog').height() / 2; $(this).find('.modal-dialog').css({ 'margin-top': modalHeight }); }); </script> 实现效果 如果想显示在屏幕正中间往上一点的位置,可以通过modalHeight的值控制,比如正中间往上100个像素 var modalHeight=$(window).height() / 2 - $('#myModal .modal-dialog').height() / 2 - 100; bootstrap4 版本bootstrap4 版本可以在<div class="modal-dialog"> 上加一个 modal-dialog-centered 属性,来垂直居中显示。
2021年第 9 期《python接口web自动化+测试开发》课程,10月17号开学! 加量不加价(新增postman, 赠送selenium和python基础2个课)
本期上课时间:10月17号-1月9号,每周六、周日晚上20:30-22:30
|