PHPIN.NET

 找回密码
 立即注册
查看: 9595|回复: 0

[高手进阶] Bootstrap3警告信息 alert.js自动关闭实现

[复制链接]

469

主题

31

回帖

5569

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
5569
发表于 2015-12-20 00:28:47 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册

x
Bootstrap3警告信息 alert.js自动关闭实现

  1. <!DOCTYPE html>
  2. <html lang="zh-cn">
  3. <head>
  4. <meta charset="UTF-8" />
  5. <title>Document</title>
  6. <link href="http://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  7. </head>
  8. <body>
  9. <br><br>
  10. <div class="alert alert-danger alert-dismissible fade in" role="alert">
  11.     <button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">×</span></button>
  12.     <p>   这里是alert</p>
  13. </div>

  14. <script src="http://cdn.bootcss.com/jquery/1.11.2/jquery.min.js"></script>
  15. <script src="http://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
  16. <script type="text/javascript">
  17. $(document).ready(function() {
  18.     // alert auto close
  19.     window.setTimeout(function() {
  20.         $('.alert').alert('close');
  21.     }, 3000);
  22.     /* 特效2
  23.     window.setTimeout(function() {
  24.         $(".alert").fadeTo(1000, 0).slideUp(1000, function(){
  25.             $(this).alert('close');
  26.         });
  27.     }, 3000);
  28.     */
  29. });
  30. </script>
  31. </body>
  32. </html>
复制代码
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

QQ|Archiver|手机版|小黑屋|PHPIN.NET ( 冀ICP备12000898号-14 )|网站地图

GMT+8, 2024-11-21 17:51

Powered by Discuz! X3.4

Copyright © 2001-2021, Tencent Cloud.

快速回复 返回顶部 返回列表