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

<button class="btn btn-lg btn-danger"
      type="button"
      data-toggle="popover"
      title="弹出框"
      data-content="这是一个弹出框插件">
      点击弹出/隐藏弹出框
</button>

$(‘button‘).popover();

$(‘button‘).popover({
    container : ‘body‘,
    viewport : {
        selector : ‘#view‘,
        padding : 10,
    }
}); 

//显示
$(‘button‘).popover(‘show‘);
//隐藏
$(‘button‘).popover(‘hide‘);
//反转显示和隐藏
$(‘button‘).popover(‘toggle‘);
//隐藏并销毁
$(‘button‘).popover(‘destroy‘);

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

<div class="alert alert-warning">                                                                            
    <button class="close" type="button" data-dismiss="alert">                                                
        <span>&times;</span>                                                                                 
    </button>                                                                                                
    <p>                                                                                                      
        警告：您的浏览器不支持！                                                                                         
    </p>                                                                                                     
</div>                                                                                                       

<div class="alert alert-warning fade in">

$(‘.close‘).on(‘click‘, function() {
    $(‘#alert‘).alert(‘close‘);
})

$(‘#alert‘).on(‘close.bs.alert‘, function() {
    alert(‘当 close 方法被触发时调用！‘);
});