文章参考
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
static
for 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.load
yourself.
如果提供的是 URL，将利用 jQuery 的
load
方法
从此
URL 地址加载要展示的内容（只加载一次）
并
插入
.modal-content
内。如果使用的是 data 属性 API，
还可以利用
href
属性指定内容来源地址。下面是一个实例：
复制
<a
data-toggle=
"modal"
href=
"remote.html"
data-target=
"#modal"
>
Click me
</a>
|
方法
.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...
})