模态弹出框--JavaScript触发时的参数设置（二），玩转Bootstrap（基础）教程-慕课网

模态弹出框--JavaScript触发时的参数设置（二）

上一节，我们对JavaScript触发模态弹出窗的属性设置进行了介绍，现在我们接着对参数设置和事件设置进行介绍。

参数设置：

在Bootstrap框架中还为模态弹出窗提供了三种参数设置，具体说明如下：

参数	使用方法	描述
toggle	$(“#mymodal”).modal(“toggle”)	触发时，反转模态弹出窗的状态。如果模态弹出窗是显示的，则关闭；反之，如果模态弹出窗是关闭的，则显示
show	$(“#mymodal”).modal(“show”)	触发时，显示模态弹出窗
hide	$(“#mymodal”).modal(“hide”)	触发时，关闭模态弹出窗

事件设置：

模态弹出窗还支持四种类型的事件，分别是模态弹出窗的弹出前、弹出后，关闭前、关闭后，具体描述如下：

事件类型	描述
show.bs.modal	在show方法调用时立即触发（尚未显示之前）；如果单击了一个元素，那么该元素将作为事件的relatedTarget属性
shown.bs.modal	该事件在模态弹出窗完全显示给用户之后（并且等CSS动画完成之后）触发；如果单击了一个元素，那么该元素将作为事件的relatedTarget事件
hide.bs.modal	在hide方法调用时（但还未关闭隐藏）立即触发
hidden.bs.modal	该事件在模态弹出窗完全隐藏之后（并且CSS动画漂完成之后）触发

调用方法也非常简单：

$('#myModal').on('hidden.bs.modal', function (e) {
    // 处理代码...
})

任务

我来试试：在右侧代码编辑器中试一试本小节新事件。

?不会了怎么办

问答
评论
笔记
代码

全部精华我要发布

未设tabindex导致esc无效

最新回答 / 爱喝汽水的小仙女

模态对话框窗口打开时焦点应该在对话框屛，用户将开始阅读上面的内容并且键盘将开始导航焦点放在的对话框。因为对话框（可以是div）是默认设置成不可定焦的，添加tabindex=’-1’应该是为了连到键盘吧

1 回答 1108 浏览

2018-11-08

关于模态框绑定事件

已采纳回答 / 慕码人8972765

在回调事件里面设置：hidden.bs.modal 当模态框完全对用户隐藏时触发。 $('#identifier').on('hidden.bs.modal', function () { // 执行一些动作...})

1 回答 2202 浏览

2017-06-21

一、应用$(function() { $(".btn").click(function() { $("#mymodal").modal("toggle"); }); $('#mymodal').on('show.bs.modal', function(e) { alert("在show方法调用时立即触发（尚未显示之前）；如果单击了一个元素，那么该元素将作为事件的relatedTarget属性--（弹窗前）"); }); $('#mymodal').on('sh...

1 回答 803 浏览

2017-04-14

想知道这一小节在实际应用中，有什么作用呢？

已采纳回答 / 滿天星

比如弹窗中要动态改变一些值（举个栗子：你是否要删除id为5的信息，这个5就是动态的值）。这个时候就可以在弹窗前，或者弹窗中，去获取你想要的值来显示在窗口中，弹窗后，根据用户操作，可以在这个函数中刷新一下数据，或者页面跳转。既达到了代码复用，而且还能省掉自己去写监听的麻烦了。所以这些函数在实际开发中还是很好用的。相似的onkeydown，onkeyup。

2 回答 940 浏览

2019-05-26