Bootstrap 的 Modal 组件提供了几个选项，可以控制对话框的一些行为。比如我们可以打开或者关掉在显示对话框时候的那个暗色的背景。开启或者关闭用 esc 键关掉对话框的功能等等。

这些选项，可以通过 data 属性去控制，也可以通过 JavaScript 的代码去控制。

在对话框的元素上面，可以添加 data 后面再加上对应的选项名称，然后再设置一下选项的值 ...

比如我们要关掉显示对话框时候的暗色的背景， 可以先看一下 ... 点击 登录 ... 显示对话框 ... 对话框周围有一个暗色背景 ...

回到编辑器 . 找到这个对话框的元素 ...

在它上面，添加一个 data ... 后面加上选项的名字的属性 ... 影响这个暗色背景的选项叫做 backdrop .... 把这个属性的值设置成 false ...

保存 ... 再去预览一下 ... 点击 登录 .. 显示对话框 ... 这次就不会再显示那个暗色的背景了 ..

JavaScript

下面， 我们再去看一下用 JavaScript 的方式来控制对话框的选项 ... 回到编辑器 .. 去掉这个 data-backdrop 属性 ... 然后在页面底部，可以添加点 JavaScript 的代码 ...

用一组 script 标签 ... 然后可以把一个匿名函数交给 jQuery ，在这个函数里的代码，会在页面加载以后立即执行 ...

$(function() {});

在这里，先找到页面上的对话框元素 ... 使用 jQuery ... 可以用对话框上面的 id 来定位它 ... 这个 id 是 #login-modal ..

再调用 modal 这个方法 .. 然后把一个对象交给这个方法 ... 这个对象里面的东西就可以是对话框的选项，还有对应的值 ...

比如我们可以先去设置一下 show 这个选项 ... 把它的值设置成 false ... 这样在默认情况下，会把对话框隐藏起来 ...

用一个逗号分隔一下 .. 另起一行 ... 再设置一下 backdrop .... 把它的值设置成 false ...

show: false,
backdrop: false

另外还有两个可以用的选项，keyboard 还有 remote .. 把 keyboard 的值设置成 false ，这样可以关掉用 esc 键关闭对话框的功能。

remote 这个选项，我们在后面的视频再去详细的介绍一下 ...

先到浏览器上试一下 ...

点击 登录 ... 会显示对话框 ... 对话框周围的暗色背景已经去掉了 ... 因为我们用 JavaScript 的代码，把 backdrop 这个选项的值设置成了 false ，这样也就不会再显示那个暗色的背景了。