BootStrap3.X模态框垂直居中显示
来源:互联网 发布:多线程并发 数据共享 编辑:程序博客网 时间:2024/06/17 05:54
当点击按钮时modal的位置看起来很不舒服, 解决办法总结有两:
1.使用modal 弹出事件方法;
从官方文档中可以了解到, modal组件有不少事件接口:
其中 “shown.bs.modal”可以在弹窗框出现后 做一些处理, 更改弹出框的样式当然是可以的:
<script type="text/javascript"> $(function(){ // dom加载完毕 var $m_btn = $(‘#modalBtn‘); var $modal = $(‘#myModal‘); $m_btn.on(‘click‘, function(){ $modal.modal({backdrop: ‘static‘}); }); // 测试 bootstrap 居中 $modal.on(‘shown.bs.modal‘, function(){ var $this = $(this); var $modal_dialog = $this.find(‘.modal-dialog‘); var m_top = ( $(document).height() - $modal_dialog.height() )/2; $modal_dialog.css({‘margin‘: m_top + ‘px auto‘}); }); }); </script>
该实现方式 弹出框是居中了, 但弹出时有一些迟疑后抖动到中部;不是特别理想, 接下来试试第二种方式;
2.修改bootstrap.js 源码;
带着问题读js库源码, 往往能学到不少知识;本着怎样让 modal组件自动居中目的, 开始跟踪组件弹窗时对应的事件;
打开bootstrap.js ctrl+f 找到 modal对应代码:
弹出框出现时, 调用的自然是 Modal.prototype.show() 方法, 而show 方法中又调用了 that.adjustDialog() 方法:
以上代码看来,官方要实现 垂直居中简直太容易, 而他们没有, 只能说国外同行网站布局观跟俺们还是有区别的。加上少量代码:
Modal.prototype.adjustDialog = function () { var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight this.$element.css({ paddingLeft: !this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : ‘‘, paddingRight: this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ‘‘ }) // 是弹出框居中。。。 var $modal_dialog = $(this.$element[0]).find(‘.modal-dialog‘); var m_top = ( $(document).height() - $modal_dialog.height() )/2; $modal_dialog.css({‘margin‘: m_top + ‘px auto‘}); }
然后就实现modal垂直居中了, 效果图:
0 0
- BootStrap3.X模态框垂直居中显示
- div垂直居中显示
- 垂直居中显示
- Bootstrap3 navbar导航条居中显示
- div水平垂直居中显示
- DIV水平垂直居中显示
- Web_CSS_DIV内部垂直居中显示
- CEdit 单行垂直居中显示
- UITextView 单行垂直居中显示
- 图片左右垂直居中显示
- div+css垂直居中显示
- Bootstrap 模态框(modal)实现水平垂直居中显示
- Bootstrap 模态框垂直居中
- bootstrap模态框 垂直居中
- div 中image 垂直水平居中显示
- li中的元素垂直居中显示
- 输入框显示文字垂直居中
- CEdit重绘垂直居中显示
- android学习(五) 向另一个应用发送用户 Intent
- 返回顶部 jQuery+css实现
- iOS 蓝牙开发 app作为外设被连接的实现(三)
- 百度音乐api接口
- 关于事件分发的一些认识
- BootStrap3.X模态框垂直居中显示
- MQTT V3.1--我的理解
- leetcode 371
- NBUT1597:Find MaxXorSum(字典树)
- Python引用(import)文件夹下的py文件的方法
- Android 静态代码分析
- 南宁H5EDU学员html/css阶段项目
- SSL 2628——2012年佛山市GDOI选拔赛题 循环小数【数学】
- 张正友标定法小结