对话框在显示，显示完成，隐藏，隐藏之后都会触发相应的事件 ... 你可以选择使用这些事件去做一些事情。 下面，我们去试一下这些事件。

打开 index.html ... 在这个页面的底部，可以在这组 script 标签里面，去监听发生在对话框上的事件 ...

先用 jQuery 找到页面上的对话框 ... 然后使用 jQuery 的 on 这个方法 ...

指定一下要监听的事件 ... 对话框在显示的时候，会立即触发一个 show.bs.modal 的事件 ... 这个事件发生以后，去执行一个匿名函数 ... 这个函数要做的事，就是简单的在控制台上输出点文字 ...

$('#login-modal').on('show.bs.modal', function() {
console.log('显示对话框');
});

又类似的方法，我们再去监听其它的事件 ... 对话框在显示完成以后会触发 shown.bs.modal 这个事件 ... 发生的时候，在控制台上输出 对话框已经显示 ...

$('#login-modal').on('shown.bs.modal', function() {
console.log('对话框已经显示');
});

继续再去监听其它的事件 ... 对话框在隐藏的时候，会立即发生 hide.bs.modal 事件 ... 发生的时候，输出 隐藏对话框 ...

$('#login-modal').on('hide.bs.modal', function() {
console.log('隐藏对话框');
});

隐藏完毕以后，会发生 hidden.bs.modal ... 发生它的时候，输出 隐藏了对话框 ..

$('#login-modal').on('hidden.bs.modal', function() {
console.log('隐藏了对话框');
});

最后，还有一个 loaded.bs.modal ... 这个事件会在使用对话框的 remote 选项，也就是加载远程地址内容到对话框以后发生 ... 内容载入完成以后，就会触发这个事件 ...

$('#login-modal').on('loaded.bs.modal', function() {
console.log('已经加载好了对话框里面的内容');
});

保存 ... 下面，我们再到浏览器上去试一下 ...

打开控制台 ...

然后点击 登录 ... 这会显示对话框 ... 首先发生的事件是 show.bs.modal ... 会在控制台上输出 显示对话框 ...

接着内容从其它的地址载入到对话框里面以后，就会发生 loaded.bs.modal ... 所以会显示一个 已经加载好了对话框里面的内容 ...

对话框完全显示以后，就会触发 shown.bs.modal 这个事件 ... 所以在显示对话框的最后，会输出 对话框已经显示

点击这个关闭按钮 ... 关掉对话框 ....

这样会立即发生一个 hide.bs.modal 事件 ... 在控制台上输出的是 隐藏对话框 ... 完成隐藏以后，会触发 hidden.bs.modal ...

所以， 最后会显示一个 隐藏了对话框 ...