一开始，我以为引用了bootstrap的css文件就万事大吉了。

结果把人家的demo拷来没法用。

为什么呢？因为bootstrap还有个js啊，不然$(‘identifier’).modal()这种东西怎么用？

浏览器一定会说：

bootstrap “modal : is not a function”

当然，这也不是最可笑的，可气的是我也知道要用jquery必须引用jquery，不引用jquery，咱们引用一个zepto也行啊。但是我引用了还是不行。

为什么呢？

因为jquery或者zepto必须在boostrap.js前面引用。

这不是必须的吗？这还用说？

一开始我没想到这个，为什么没想到这个？因为浏览器报错的时候先报$不是个xx，这就让人以为是jquery的cdn不给力，用chrome的source一看，文件已经下载到本地了。

大概是因为boostrap.js里用了$，它用到$的时候，jquery还没加载呢。

特别恶心的是，我之前在调试的时候把preserve log给勾上了（这功能就是会一直把页面跳转之前的东西留着），以至于我修改了引用顺序之后，刷新页面仍然能看到报错，其实这个报错是旧的，丫不消失了而已。

（所以说，牛逼的功能有时候也会搞出麻烦来）

这玩意除了js有问题，其实css也挺复杂，光用个modal样式不行，还得用modal-dialog，还得有modal-content，套三层，里面再用什么header、body、footer装上，少了这些，这个模态框就缺头少脚。

关于页面的逻辑，这里也有问题，模态框默认是你点到框外面的白地，它也会消失掉。

所以bootstrap给了一个隐藏事件，’hidden.bs.modal’，如果想把模态框当成原生confirm来用的话，得往这个事件上绑定一个默认操作。

话说回来，原生confirm挺好用的，为什么非要写一个模态框呢？

原因很简单，手机浏览器发现一个页面反复用confirm或者alert的时候，它会干掉你的取消按钮，代之以关闭本页面，因为它觉得这个页面可能是一个恶意页面，用户要是一害怕，点了那个关闭，页面就真关掉了。

当然，本次的需求是页面初始化的时候就弹提示，你必须确定或取消。所以严格来说，这个反复点的可能性并不大。

但是还有一个问题，让人点确定没啥可说的，让人点“取消”进入某一个路径，这个事情感觉挺别扭的，用户必须认真看清楚提示才知道到底应该点确定还是取消。

自己用一个模态框，可以在主按钮和辅按钮上分别写个各自的功能或者角色，比如“主讲人”是主按钮，用的是蓝色的btn-primary样式，而“观看者”是辅按钮，用的是白色的btn样式。

想想也是挺蛋疼的，就为了做个弹出框，引用了两个js，一个css，写了一堆扯淡的html和js。早知道这样，还不如从哪儿找个diy版本的模态框用用得了。