Bootstrap中的模态框和警告框是经常使用的两种窗口，模态框是使用data-dismiss='modal'，而警告框是使用data-dismiss='alert'。如果将这两个框结合起来使用，展示的效果不一样。下面利用一个实例说明Bootstrap结合模态框和警告框实现弹窗，操作如下：
工具/原料
1
Bootstrap
2
HTML5
3
CSS3
4
jquery
5
WebStorm
6
浏览器
7
截图工具
方法/步骤
1
第一步，在WebStorm工具里新建静态页面modalAlert.html，并引入Bootstrap相关的js和css文件，如下图所示：
2
第二步，在
插入三个div标签，并在最里层的div插入一个button和span，如下图所示：3
第三步，在警告框代码下方插入一个模态框，模态框有框头、框体和框尾，如下图所示：
4
第四步，保存代码并预览该静态页面，查看到页面显示的效果，如下图所示：
5
第五步，在jquery初始化函数内添加按钮点击事件，分别调用警告框和模态框的方法，如下图所示：
6
第六步，由于弹出窗口出现了透明状，修改代码中的样式，让显示正常窗口，如下图所示：
注意事项
1
注意Bootstrap模态框和警告框的区别
2
注意合理使用Bootstrap中的样式