在web设计时有些操作需要给予操作者进一步提醒，我们常常会使用window.confirm();来弹出一个警告框

但是我们没法对它进行美化，它在日渐提高的审美水平下越发越觉得难看。当我们使用了bootstrap后你会发现里面有一个modal，而它实在太好看了（至少paperen是这么认为的） http://twitter.github.com/bootstrap/javascript.html#modals

我们使用这个modal来实现类似window.confirm的功能，但是这倒是需要写多点代码 例如下述代码：

<a href="#confirmModal" role="button" class="btn btn-delete" data-toggle="modal" rel="test.html?id=1">删除1</a>
<a href="#confirmModal" role="button" class="btn btn-delete" data-toggle="modal" rel="test.html?id=2">删除2</a>
<div class="modal hide fade" id="confirmModal">
 <div class="modal-header">
  <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
  <h3>系统提示</h3>
 </div>
 <div class="modal-body">
  <p>确定继续操作吗？</p>
 </div>
 <div class="modal-footer">
  <a href="#" class="btn btn-primary btn-confirm">确定</a>
  <a href="#" class="btn" data-dismiss="modal">取消</a>
 </div>
</div>
<script type="text/javascript">
 $(function(){
  $('.btn-delete').click(function(){
   $('#confirmModal .btn-confirm').attr('href', $(this).attr('rel') );
  });
 });
</script>

正如你看到，必须在页面放置modal的html结构，然后对需要弹出提示的元素加上事件，比如这里就是click事件时才触发，同时不能在a的href中直接放置将要跳转的url而是要将它放到rel属性中，当点击时将rel中的url放到modal中的btn-confirm中的href去，就这样勉强能符合我们的要求，但是长久下去你会很烦，因为每次都要复制粘贴这个modal的结构还要写一样套路的js代码，我们希望将它封装起来使用，于是paperen就模仿着bootstrap其他组件的js模式写了一个，叫bootstrap-confirm，其实也依赖于bootstrap-modal

先看看例子

http://paperen.com/demo/bootstrap-confirm/test.html

bootstrap-confirm代码

http://paperen.com/demo/bootstrap-confirm/bootstrap-confirm.js

使用的话很简单，例子中也有说明，在这里也重新描述一下

比如你需要对一个a#test_link标签是删除某条记录的 href为delete.php?id=1套用这种确定提示，那么就$('#test_link').confirm();即可

<a href="delete.php?id=1" id="test_link">删除</a>
<script>
$('#test_link').confirm();
</script>

如果想改变modal的标题与内容那么只需要在confirm()中加入title、message，当然还可以动态改变action调整跳转到哪个url

<a href="test.html" id="link_2">修改title与message、action</a>
<script>
$('#link_2').confirm({
 'title' : '测试一下',
 'message' : '测试修改modal内容',
 'action' : 'test.html'
});
</script>

而action参数比较特殊，可以传一个函数，代表点击确定后将要执行的其他动作，比如对于一个表单来说你可能需要将action参数指定一个函数

$('#form_btn').confirm({
 'action' : function() {
  $('#test_form').submit();
 }
});

paperen我也模仿着写js所以不排除存在问题，若遇到问题与不足请指出，希望这个bootstrap-confirm能帮到你忙