bootstrap modal 垂直居中对齐
文章参考
http://www.bubuko.com/infodetail-666582.html
http://v3.bootcss.com/JavaScript/#modals
- <div class="modal fade" id="sqh_model">
- <div class="modal-dialog">
- <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">蔬菜预约</h4>
- </div>
- <div class="modal-body">
- <p>尽请期待</p>
- </div>
- <div class="modal-footer">
- <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
- <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
- </div>
- </div><!-- /.modal-content -->
- </div><!-- /.modal-dialog -->
- </div><!-- /.modal -->
- function showTips(){
- $('#sqh_model').modal('show')
- }
默认是距离顶部30px,左右居中
如图所示
解决办法一:覆盖之前的CSS样式
- /**********对bootstrap的modal样式进行重写**********/
- .modal-dialog {
- margin: 200px auto;
- }
解决办法二:调用回调函数
- function showTips(){
- //{"backdrop":"static"}点击背景不会消失
- $('#sqh_model').modal({"backdrop":"static"}).modal('show').on("shown.bs.modal",function(){
- // 是弹出框居中。。。
- var $modal_dialog = $(this.$element[0]).find('.modal-dialog');
- //获取可视窗口的高度
- var clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
- //得到dialog的高度
- var dialogHeight = $modal_dialog.height();
- //计算出距离顶部的高度
- var m_top = (clientHeight - dialogHeight)/2;
- console.log("clientHeight : " + clientHeight);
- console.log("dialogHeight : " + dialogHeight);
- console.log("m_top : " + m_top);
- $modal_dialog.css({'margin': m_top + 'px auto'});
- });
- }
解决办法三:修改源代码
- 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 clientHeight = (document.body.clientHeight < document.documentElement.clientHeight) ? document.body.clientHeight: document.documentElement.clientHeight;
- //得到dialog的高度
- var dialogHeight = $modal_dialog.height();
- //计算出距离顶部的高度
- var m_top = (clientHeight - dialogHeight)/2;
- console.log("clientHeight : " + clientHeight);
- console.log("dialogHeight : " + dialogHeight);
- console.log("m_top : " + m_top);
- $modal_dialog.css({'margin': m_top + 'px auto'});
- }
参数
可以将选项通过 data 属性或 javascript 代码传递。对于 data 属性,需要将参数名称放到 data-
之后,例如 data-backdrop=""
。
backdrop | boolean 或 字符串'static' |
true |
Includes a modal-backdrop element. Alternatively, specify the modal on click. |
keyboard | boolean | true | 键盘上的 esc 键被按下时关闭模态框。 |
show | boolean | true | 模态框初始化之后就立即显示出来。 |
remote | path | false |
This option is deprecated since v3.3.0 and will be removed in v4. We recommend instead using client-side templating or a data binding framework, or calling jQuery.loadyourself. 如果提供的是 URL,将利用 jQuery 的 URL 地址加载要展示的内容(只加载一次)并 插入 还可以利用 复制
|
方法
.modal(options)
将页面中的某块内容作为模态框激活。接受可选参数 object
。
$('#myModal').modal({
keyboard: false
})
.modal('toggle')
手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中(也就是,在触发 shown.bs.modal
或hidden.bs.modal
事件之前)。
$('#myModal').modal('toggle')
.modal('show')
手动打开模态框。在模态框显示之前返回到主调函数中 (也就是,在触发 shown.bs.modal
事件之前)。
$('#myModal').modal('show')
.modal('hide')
手动隐藏模态框。在模态框隐藏之前返回到主调函数中 (也就是,在触发 hidden.bs.modal
事件之前)。
$('#myModal').modal('hide')
.modal('handleUpdate')
Readjusts the modal's positioning to counter a scrollbar in case one should appear, which would make the modal jump to the left.
Only needed when the height of the modal changes while it is open.
$('#myModal').modal('handleUpdate')
事件
Bootstrap 的模态框类提供了一些事件用于监听并执行你自己的代码。
All modal events are fired at the modal itself (i.e. at the <div class="modal">
).
show.bs.modal |
的元素,则此元素可以通过事件的 |
shown.bs.modal |
此事件在模态框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发。 如果是通过点击某个作为触发器的元素,则此元素可以通 过事件的 |
hide.bs.modal | hide 方法调用之后立即触发该事件。 |
hidden.bs.modal | 此事件在模态框被隐藏(并且同时在 CSS 过渡效果完成)之后被触发。 |
loaded.bs.modal | 从远端的数据源 加载完数据之后触发该事件。 |
$('#myModal').on('hidden.bs.modal', function (e) {
// do something...
})