9.Bootstrap(中文教程)元件：alert可关闭的提示

ㄧ.alert可关闭的提示

<div class="component demo">  <div class="alert alert-primary alert-dismissible fade show" role="alert">   <h4>Alert</h4>   hello~ <a href="#" class="alert-link">see more.</a>   <button class="close" data-dismiss="alert">×</button> </div></div>.component.demo{ padding: 50px;}

重点：
1.在alert加一个关闭的按钮也就是button，close为定义关闭按钮。×为x的字码
2.在alert定义的这一层在定义一个将关闭按钮位置固定，也就是alert-dismissible
3.如果要让关闭按钮有功能将alert关掉的话，要在button的属性加入data-dismiss="alert"
4.fade show为隐藏跟显示的效果
5.记得要有关闭alert的功能一定要有bootstrap.js

二.alert外面层的按钮关闭

<div class="component demo">  ......   <button class="btn btn-danger close-alert">Close</button></div>$(document).ready(()=>{ $('.close-alert').click(()=>{  $('.alert').alert('close'); });});

重点：
1.在外层添加button，button加入bootstrap的btn与样式btn-danger
2.close-alert为自定义，这个自定义是要让自己在js写的事件触发的
3.close-alert点击事件，点击让alert关掉

4.下面为重点为官网alert事件的资料(5.6.7.)
5.$().alert():发出警报，侦听具有 data-dismiss="alert" 属性的后代元素上的点击事件。 （使用 data-api 的自动初始化时不需要）
6.$().alert('close'):从 DOM 中删除来关闭警报。如果元素上出现 .fade 和 .show，则在删除之前该警报将淡出。
7.$().alert('dispose'):销毁一个元素的警报

二.监听alert

$(document).ready(()=>{ ......  $('.alert').on('close.bs.alert',()=>{  console.log('close alert'); });   $('.alert').on('closed.bs.alert',()=>{  console.log('closed alert'); });});

重点：
1.close.bs.alert:当调用 close 实例方法时，此事件会立即触发
2.closed.bs.alert:警报关闭时，会触发此事件（等待CSS转换完成）。

codepen
参考：bootstrap4