7-5 警示框--可关闭的警示框
本节编程练习不计算学习进度,请电脑登录imooc.com操作

警示框--可关闭的警示框

大家在平时浏览网页的时候,会发现一些警示框带有关闭按钮,用户一点击关闭按钮就能自动关闭显示的警示框(也就是让警示框隐藏不显示)。在Bootstrap框架中的警示框也具有这样的功能。

使用方法:

只需要在默认的警示框里面添加一个关闭按钮。然后进行三个步骤:

  1、需要在基本警示框“alert”的基础上添加“alert-dismissable”样式。

  2、在button标签中加入class="close"类,实现警示框关闭按钮的样式。

  3、要确保关闭按钮元素上设置了自定义属性:“data-dismiss="alert"”(因为可关闭警示框需要借助于Javascript来检测该属性,从而控制警示框的关闭)。

具体使用如下:

<div class="alert alert-success alert-dismissable" role="alert">
    <button class="close" type="button" data-dismiss="alert">&times;</button>
    恭喜您操作成功!
</div>

运行效果如下:

原理分析:

在样式上,需要在基本警示框“alert”的基础上添加“alert-dismissable”样式,这样就可以实现带关闭功能的警示框。

/*bootstrap.css文件第4447行~第4455行*/
.alert-dismissable {
  padding-right: 35px;
}
.alert-dismissable .close {
  position: relative;
  top: -2px;
  right: -21px;
  color: inherit;
}

任务

我来试试:在右侧代码任务部分补充代码,为警告框添加“关闭按钮

效果图如下:

  1. <!DOCTYPE HTML>
  2. <html>
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  5. <title>警示框--可关闭的警示框</title>
  6. <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
  7. </head>
  8. <body>
  9. <div class="alert alert-success alert-dismissable" role="alert">
  10. <button class="close" type="button" data-dismiss="alert">&times;</button>
  11. 恭喜您操作成功!
  12. </div>
  13. <div class="alert alert-info alert-dismissable" role="alert">
  14. <button class="close" type="button" data-dismiss="alert">&times;</button>
  15. 请输入正确的密码
  16. </div>
  17. <div class="alert alert-warning alert-dismissable" role="alert">
  18. <button class="close" type="button" data-dismiss="alert">&times;</button>
  19. 您已操作失败两次,还有最后一次机会
  20. </div>
  21. <div class="alert alert-danger alert-dismissable" role="alert">
  22. <button class="close" type="button" data-dismiss="alert">&times;</button>
  23. 对不起,您输入的密码有误
  24. </div>
  25. <!--下面是代码部分-->
  26. <h2>下面是代码部区</h2>
  27. <div class="alert alert-info" role="alert">请修改相应信息</div>
  28. <div class="alert alert-success" role="alert">谢谢,操作成功!</div>
  29. <div class="alert alert-warning" role="alert">您已操作失败两次,还有最后一次机会</div>
  30. <div class="alert alert-danger" role="alert">对不起,您刚才的操作失败</div>
  31. <script src="https://www.imooc.com/static/lib/jquery/1.9.1/jquery.js"></script>
  32. <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
  33. </body>
  34. </html>
  1. body {
  2. padding: 20px 200px;
  3. }
下一节