对话框在显示的时候，会有一层暗色的半透明的背景覆盖在页面内容的上面 ..

如果你不想要这个半透明的背景 .. 可以找到这个 modal 的包装元素 .. 上面添加一个 data-backdrop，把它设置成 false .. 再试一下 ..

现在就不会显示之前的半透明暗色背景了 ..

使用 JavaScript，我们也可以控制对话框的显示 .. 这里我们直接在控制台上试一下 ... 想显示对话框 ... 先找到它的包装元素 .. 我这里就是带 modal-demo 这个 id 的元素 ..

用一下 Bootstrap 提供的 modal 这个方法 . . 给它一个 show

执行一下 ... 会显示对话框 ..

隐藏对话框 .. 同样执行一下 modal 方法，给它一个 hide 参数 .. 切换显示的话，可以用一下 toggle ..

事件

对话框的显示还有隐藏的时候都会发生自定义的事件 .. 我们可以去监听这些事情，去做一些事情 ..

打开自定义的脚本 .. 先找到对话框的包装 .. 带 modal-demo 这个 id 的元素 .. 用一下 on 这个方法，监听的事件是 show.bs.modal

开始显示对话框的时候会触发这个事件 .. 在控制台上输出一个 show

再复制几份 .. 对话框完全显示以后，会触发 shown.bs.modal ...

开始隐藏对话框 ... 会触发 hide.bs.modal ..

完全隐藏对话框以后，又会触发 hidden.bs.modal ..

预览

再去试一下 ... 打开对话框 .. 控制台上会输出 show ，然后是 shown ... 再关掉对话框 .. 控制台上又会输出 hide .. 对话框完全关闭以后，又会输出一个 hidden ..