由于目前的任务要求将js的alert的样式修改,并且要设置延时关闭。
网上查了很多,一个结论是原生的alert是不能修改的,只能绕过去。
我选择的方式是重写alert方法。
一、重写alert
- js代码:
-
window.alert = function(msg){ $("#alertContentId").html(msg); $("#alertModalId").modal('show'); setTimeout('$("#alertModalId").modal("hide")',1000); };
- 弹出框html代码:
-
<!-- Modal --> <div class="modal fade" id="alertModalId" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" style="z-index: 9999"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title text-center" id="myModalLabel">操作结果</h4> </div> <div class="modal-body"> <p id="alertContentId" class="text-center"></p> </div> </div> </div> </div>
二、分析
就是覆盖了js的原生alert,使用了bootstrap的模态框来实现。只要将原来的处理事件添加到模态框的按钮就可以。