美化系统自带的alert

效果图：

未美化前：

美化后：

我的思路：

弹出一个alert美化框，然后在显示2.5秒后消失。优化用户体验。

使用js框架：

我是使用 bootstrap js 的 模态框

实现代码：

首先你要引入 bootstrap js 的基础css 和 js。我这里是用国内默认cdn的链接。

html code:
自己写的css是兼容ie用的。兼容了ie6到8

[code lang=”html”]
<!– Modal –>
<div class="modal fade glyphicon" id="myModalalert" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true" style="display:none;width:600px\9; margin:0 auto\9;overflow:hidden;*position:absolute;*left:35%">
<div class="modal-dialog">
<div class="modal-content">

<div class="modal-body"> <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 id="t_alert_msg" style="font-weight:bold"> Loading… </h4>

</div>
</div><!– /.modal-content –>
</div><!– /.modal-dialog –>
</div><!– /.modal –>

[/code]

js code :

调用 t_alert 即可。

[code lang=”js”]
function t_alert(msg){
$("#t_alert_msg").html(msg);
$(‘#myModalalert’).modal(‘show’);
setTimeout("$(‘#myModalalert’).modal(‘hide’)",2500);
}
[/code]

资料 ：bootstrap js 中文官网  http://www.bootcss.com/