文章參考
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...
})