点击某个按钮或者是链接 ，可以在当前的页面上，打开一个对话框，你可以设计这个对话框的作用，比如显示一个登录或者注册用的表单 ... 这就是 Bootstrap 的 Modal 组件的作用。

下面，我们去看一下怎么样使用 Bootstrap 的 Modal 组件 。这个对话框需要一些特定的代码结构 ...

先去掉这个 style="height: 1500px;"

然后我们可以对话框需要的代码它放在页面的底部 ... 默认对话框是隐藏起来的 ... 这里我们为了可以实时的看到对话框的变化去设计它的样式 ... 可以想办法把它显示在页面上 ...

先添加一组 div 标签 ... 上面加上一个 modal-backdrop ... 还有一个 in ...

div.modal-backdrop.in

在打开对话框以后，会在页面上，添加这样一组标签 ... 它的作用就是在对话框的下面，添加一层暗色半透明的背景 ... 让用户的注意力集中在对话框本身 ...

这里我们手工添加这组标签是为了看一下打开对话框以后的效果 ... 在真正使用的时候，需要把它去掉 ...

在它上面，我们再去设计这个对话框 ...

首先是一组 div 标签 ... 上面加上一个叫 modal 的类 ... 不过为了让这个对话框可以显示在页面上 ... 在这个元素上，可以再加上一个 in ...

然后用一个 style 属性 ... 把 display 设置成 block ... 这样会把这个对话框显示出来 ... 真正用它的时候，要把这个 in 类 ... 还有这个 style 属性去掉 ... 因为它们在打开对话框以后，会自动添加到这个元素上，把对话框显示出来 ...

<div class="modal in" style="display: block;"></div>

在它里面，再加上一组 div 标签。这个标签上要添加一个 modal-dialog 类 ...

div.modal-dialog

在这组标签里，是一组带 modal-content 类的 div ... 这个类定义了对话框的背景，圆角，还有阴影的效果 ...

div.modal-content

在它里面，是对话框的不同部分的内容 ... 分为头部，主体，还有页脚 ...

对话框的头部内容可以放在一组 div 标签里面 ... 在它上面，加上一个 modal-header 的类 ...

div.modal-header

在头部这里，可以加上对话框的标题 ... 还有关掉对话框用的关闭按钮 ...

先输入一组标题 ...

h4 ... 用户登录 ...

然后在它上面，再去添加关闭对话框用的按钮 ... 这个按钮可以使用一组 button 标签 ... 上面要加上一个 close 类 ... 按钮上的内容是一个 叉号 ... 这个符号的代码是 &times;

<button class="close">&times;</button>

头部内容的下面，就是对话框的主体内容 ... 这部分内容也要放在一个容器里面 ... 在上面添加一个 modal-body ...

div.modal-body ... 在这里，先简单的输入点文字 ... <p>用户登录用的表单</p>

然后是对话框的底部的内容 .... 用一组 div 标签 ... 上面要加上一个 modal-footer 类 .. 在这里，先添加一个按钮 ...

<div class="modal-footer">
<button class="btn btn-primary">登录</button>
</div>

现在， 你看到的，就是这个对话框组件的基本的样式 ...

Bootstrap 还提供了两个类，可以改变这个对话框的大小 ... 在这个 modal-dialog 类所在的元素上面 ... 再添加一个 modal-lg

它可以把这个对话框变大 ... 另外还有一个 modal-sm ...

这个类，可以把对话框变小一些 ...