bootstrap modal 垂直居中对齐
2016-09-07 17:55
267 查看
文章参考
http://www.bubuko.com/infodetail-666582.html http://v3.bootcss.com/javascript/#modals
默认是距离顶部30px,左右居中
如图所示
![](http://dl2.iteye.com/upload/attachment/0108/7835/bac3b5df-c51d-351c-a552-13e1753b6b02.png)
解决办法一:覆盖之前的CSS样式
解决办法二:调用回调函数
解决办法三:修改源代码
将页面中的某块内容作为模态框激活。接受可选参数
复制
手动打开或关闭模态框。在模态框显示或隐藏之前返回到主调函数中(也就是,在触发
复制
手动打开模态框。在模态框显示之前返回到主调函数中 (也就是,在触发
复制
手动隐藏模态框。在模态框隐藏之前返回到主调函数中 (也就是,在触发
复制
Only needed when the height of the modal changes while it is open.
复制
All modal events are fired at the modal itself (i.e. at the
复制
![](http://dl2.iteye.com/upload/attachment/0108/7835/bac3b5df-c51d-351c-a552-13e1753b6b02-thumb.png)
大小: 10.6 KB
查看图片附件
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,左右居中
如图所示
![](http://dl2.iteye.com/upload/attachment/0108/7835/bac3b5df-c51d-351c-a552-13e1753b6b02.png)
解决办法一:覆盖之前的CSS样式
/**********对bootstrap的modal样式进行重写**********/ .modal-dialog { margin: 200px auto; }
解决办法二:调用回调函数
//触发显示对话框 function showTips(){ $('#sqh_model').modal('show'); } //配置model对话框 $(function(){ //{"backdrop":"static"}点击背景不会消失 $('#sqh_model').modal({"backdrop":"static"}).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 staticfor a backdrop which doesn't close 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 的 load方法从此 URL 地址加载要展示的内容(只加载一次)并 插入 .modal-content内。如果使用的是 data 属性 API, 还可以利用 href<
4000
/code> 属性指定内容来源地址。下面是一个实例:
复制
[code] |
方法
.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 | show方法调用之后立即触发该事件。如果是通过点击某个作为触发器 的元素,则此元素可以通过事件的 relatedTarget属性进行访问。 |
shown.bs.modal | 此事件在模态框已经显示出来(并且同时在 CSS 过渡效果完成)之后被触发。 如果是通过点击某个作为触发器的元素,则此元素可以通 过事件的 relatedTarget属性进行访问。 |
hide.bs.modal | hide方法调用之后立即触发该事件。 |
hidden.bs.modal | 此事件在模态框被隐藏(并且同时在 CSS 过渡效果完成)之后被触发。 |
loaded.bs.modal | 从远端的数据源加载完数据之后触发该事件。 |
$('#myModal').on('hidden.bs.modal', function (e) { // do something... })
![](http://dl2.iteye.com/upload/attachment/0108/7835/bac3b5df-c51d-351c-a552-13e1753b6b02-thumb.png)
大小: 10.6 KB
查看图片附件
相关文章推荐
- bootstrap modal 垂直居中对齐
- Bootstrap弹出框(modal)垂直居中
- bootstrap 模态框(modal)实现水平垂直居中显示的方法
- Bootstrap 模态框(modal)实现水平垂直居中显示
- bootstrap modal垂直居中
- bootstrap modal弹出框的垂直居中
- bootstrap modal垂直居中
- bootstrap多个modal模态框同时设置垂直居中的方法
- Bootstrap模态框(modal)垂直居中
- bootstrap modal 垂直居中对齐
- bootstrap modal弹出框的垂直居中
- bootstrap 模态框(modal)实现水平垂直居中显示
- Bootstrap(v3.2.0)模态框(modal)垂直居中
- bootstrap 弹出框modal添加垂直方向滚轴效果
- Bootstrap Modal 垂直方向加滚动条
- Bootstrap modal不能垂直居中的解决办法
- Bootstrap弹出框(modal)垂直居中的问题及解决方案详解
- bootstrap modal垂直居中
- Bootstrap模态框(modal)垂直居中
- Bootstrap modal 模态框垂直居中