下面，我们看一下，怎么打开还有关闭这个对话框 .. 先去掉在 modal 这个类所在的元素上面的 in 这个类 ... 还有它后面的这个 style 属性 ...

再去掉下面这个 modal-backdrop 这个元素 .. 再去设计对话框的样式和内容的时候，可以把它们再添加进来 ...

打开这个对话框，可以通过 html 的 data 属性，或者也可以通过 JavaScript 的方式 ... 先看一下用 data 属性的方法 ...

我们先要在这个对话框上定义一个 id ... 可以叫它 login-modal ... 然后在开启这个对话框的元素上面，需要用到这个 id ...

下面，我们让用户在点击 登录 这个链接的时候，打开这个对话框 ... 先找到这个链接 ..

然后在这个链接上，要添加两个 data 属性 ... 一个是 data-toggle ... 把它的值设置成 modal ... 意思就是，它可以切换显示对话框 ...

再添加一个 data-target ... 这个属性的值，就是在要切换显示的那个对话框上面定义的 id 号 ... 这里就是 #login-modal ..

下面可以去试一下 ... 点击 登录 ... 会打开我们之前设计好的这个对话框 ...

在显示这个对话框的时候，可以有一个过渡的效果 ... 回到编辑器 ... 在这个对话框元素上面 ... 添加一个 fade ...

再去试一下 ... 先刷新一下页面 .... 然后再点击这个 登录 菜单 ..

这回显示这个对话框的时候，会有一个过渡的动画效果 ...

关闭

下面， 我们再去想办法，在点击这个对话框上面的关闭按钮的时候，关掉这个对话框 ...

回到编辑器 ... 找到这个对话框上的这个关闭按钮的元素 ..

就是这个带 close 类的 button 标签 ... 在这个元素上面，再添加一个 data-dismiss 属性 ... 它的值设置成 modal ... 这样这个按钮就可以关掉对话框 了 ...

再去试一下 ... 点击登录 ... 会显示这个对话框 ... 点击对话框上面的这个关闭按钮 ... 可以关掉对话框 ...

或者，点击一下页面的其它的地方，也可以关掉这个对话框 ...