第 16 章 弹出框和警告框插件

    1.弹出框

    2.警告框

    主讲教师：李炎恢

    本节课我们主要学习一下 Bootstrap 中的弹出框和警告框插件。

    一．弹出框

    弹出框即点击一个元素弹出一个包含标题和内容的容器。

    //基本用法

    弹出框插件有很多属性来配置提示的显示，具体如下：

    1. $('button').popover({
    2.     container : 'body',
    3.     viewport : {
    4.         selector : '#view',
    5.         padding : 10,
    6.     }

    通过 JavaScript 执行的方法有四个。

    Popover 插件中事件有四种：

    第 16 章 弹出框和警告框插件 - 图1

    //事件，其他雷同

    1. $('button').on('show.bs.tab', function() {
    2.     alert('调用 show 方法时触发！');
    3. });

    二．警告框

    //基本实例

    1. <div class="alert alert-warning">                                                                            
    2.     <button class="close" type="button" data-dismiss="alert">                                                
    3.         <span>&times;</span>                                                                                 
    5. </div>

    //添加淡入淡出效果

    如果用 JavaScript，可以代替 data-dismiss="alert"

    //JavaScript 方法

    1. $('.close').on('click', function() {
    2.     $('#alert').alert('close');
    3. })

    Alert 插件中事件有两种：

    //事件，其他雷同

    1. $('#alert').on('close.bs.alert', function() {
    3. });