欢迎光临景诺科技软件开发淘宝店

进店请收藏,谢谢

美化系统自带的alert

效果图:

未美化前:

未美化前

美化后:

美化后

我的思路:

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

使用js框架:

我是使用 bootstrap js 的 模态框

实现代码:

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

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

<!-- 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 -->

js code :

调用 t_alert 即可。

function t_alert(msg){
	$("#t_alert_msg").html(msg);
	$('#myModalalert').modal('show');
	setTimeout("$('#myModalalert').modal('hide')",2500);
	}

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

更多

本文固定链接: http://shanmao.me/web/mei-hua-xi-tong-zi-dai-de-alert | 山猫的博客

该日志由 admin 于2013年11月06日发表在 jQuery, 网页前端 分类下, 你可以发表评论,并在保留原文地址及作者的情况下引用到你的网站或博客。
原创文章转载请注明: 美化系统自带的alert | 山猫的博客
关键字:
【上一篇】
【下一篇】