jquery页面关闭或者离开事件

 

1. <div class="modal fade" id="sqh_model">
2. <div class="modal-dialog">
3. <div class="modal-content">
4. <div class="modal-header">
5. <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
6. <h4 class="modal-title">蔬菜预约</h4>
7. </div>
8. <div class="modal-body">
9. <p>尽请期待</p>
10. </div>
11. <div class="modal-footer">
12. <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
13. <button type="button" class="btn btn-primary" data-dismiss="modal">确定</button>
14. </div>
15. </div><!-- /.modal-content -->
16. </div><!-- /.modal-dialog -->
17. </div><!-- /.modal -->
18.   
19.   
20. function showTips(){  
21.     $('#sqh_model').modal('show')  
22. }

 

默认是距离顶部30px,左右居中

如图所示

 

解决办法一：覆盖之前的CSS样式

1. /**********对bootstrap的modal样式进行重写**********/  
2. .modal-dialog {  
3.     margin: 200px auto;  
4. }

 

 

解决办法二：调用回调函数

 

1. function
2. //{"backdrop":"static"}点击背景不会消失
3. '#sqh_model').modal({"backdrop":"static"}).modal('show').on("shown.bs.modal",function(){  
4. // 是弹出框居中。。。
5. var $modal_dialog = $(this.$element[0]).find('.modal-dialog');  
6. //获取可视窗口的高度
7. var
8. //得到dialog的高度
9. var
10. //计算出距离顶部的高度
11. var
12. "clientHeight : "
13. "dialogHeight : "
14. "m_top : "
15. 'margin': m_top + 'px auto'});  
16.         });  
17.     }

 

解决办法三：修改源代码

1. Modal.prototype.adjustDialog = function
2. var modalIsOverflowing = this.$element[0].scrollHeight > document.documentElement.clientHeight  
3.   
4. this.$element.css({  
5. this.bodyIsOverflowing && modalIsOverflowing ? this.scrollbarWidth : '',  
6. this.bodyIsOverflowing && !modalIsOverflowing ? this.scrollbarWidth : ''
7.     });  
8.   
9. // 是弹出框居中。。。
10. var $modal_dialog = $(this.$element[0]).find('.modal-dialog');  
11. //获取可视窗口的高度
12. var
13. //得到dialog的高度
14. var
15. //计算出距离顶部的高度
16. var
17. "clientHeight : "
18. "dialogHeight : "
19. "m_top : "
20. 'margin': m_top + 'px auto'});  
21. }

 

 

参数

data- 之后，例如 data-backdrop=""。

backdrop	'static'	true	Includes a modal-backdrop element. Alternatively, static 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. client-side templating or a data binding framework, or calling jQuery.loadyourself. load 方法从此 URL 地址加载要展示的内容（只加载一次）并 .modal-contenthref 复制 <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 的模态框类提供了一些事件用于监听并执行你自己的代码。

<div class="modal">).

show.bs.modal	showrelatedTarget
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...
})