Modal ，对话框 .. 它可以覆盖在当前页面之上来显示 ..

在对话框的包装上要添加一个 modal 类 .. 再添加一个 fade ，还有 show，这样在它显示的时候会有一个过渡效果 ..

对话框默认会被隐藏起来 .. 我们可以先让它显示在页面上 .. 添加一个 d-block

它里面再包装一个 modal-dialog .. 然后是对话框的具体内容 .. 包装上要添加一个 modal-content .. 内容里面可以有头部，主体，还有页脚 ..

头部内容放在 modal-header 里面 .. 里面用一个标题元素 .. 上面加上 modal-title .. 文字是 Modal ..

头部这里还可以再添加一个关闭按钮 .. 一个 button 标签 ，上面加上 close ... 按钮上显示的是一个叉号 ..

然后在按钮元素上再添加一个 data-dismiss 设置一下要关闭的东西，这里就是 modal ..

主体

跟头部同一级别，再去添加对话框的主体 .. 包装上添加一个 modal-body .. 里面有个段落文字 .. hello ~

页脚

跟头部还有主体同一级别还可以再添加一个 modal-footer ... 在它里面可以添加两个按钮 .. button.btn-btn-secondary .. 这个按钮是取消 .. 复制一份 .. 这个按钮是 确认 .. 按钮的样式是 btn-primary ..

预览
现在页面上显示的就是一个基本的对话框组件 .. 去掉包装上的 d-block ..

触发
下面我们可以再去添加一个可以触发显示对话框内容的按钮 .. 一个 button，加上 btn.btn-danger .. 按钮上的文字是 删除 ..
在这个触发元素上要再添加一个 data-toggle ，对应的值是 modal .. 再添加一个 data-target 对应的值是它要打开的对话框 .. #modal-demo

然后在这个对话框元素上再添加一个 id .. 它的值就是 modal-demo

到浏览器上再试一下 ..

按一下这个 删除 按钮 .. 会显示对话框 ..

按一下空白的地方 .. 可以关掉对话框 ... 或者也可以按一下对话框上面的这个叉号 ...