（十五）弹出框和警告框插件

一．弹出框

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

1、基本实例

<body style="margin: 200px;">
<button class="btn btn-info" data-toggle="popover" title="弹出框" data-content="这是一个弹出框插件">点击弹出/隐藏弹出框</button>

<script src="<%=path%>/script/jquery-3.2.1.min.js"></script>
<script src="<%=path%>/script/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
//初始化

    $(\'button\').popover();
</script>
</body>

2、可配置的属性

data-viewport的用法，如下

<head>
    <title>boostrap</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <link rel="stylesheet" href="<%=path%>/script/bootstrap/css/bootstrap.css">
    <style>
        a:focus {
            outline: none;
        }

        #view {
            width: 300px;
            height: 100px;
            border: 1px solid red;
        }
    </style>
</head>
<body style="margin: 200px;">

<div id="view">
    <button class="btn btn-info" data-toggle="popover" title="弹出框" data-content="这是一个弹出框插件">点击弹出/隐藏弹出框</button>
</div>
<script src="<%=path%>/script/jquery-3.2.1.min.js"></script>
<script src="<%=path%>/script/bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(\'button\').popover({
        container: \'body\',
        viewport: {
            selector: \'#view\',
            padding: 60,
        }
    });
</script>
</body>

3、方法

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

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

4、事件

Popover 插件中事件有两种。

//事件，其他雷同
 $(\'button\').on(\'show.bs.tab\', function () {
 alert(\'调用 show 方法时触发！\'); 
});

二．警告框

警告框即为点击小时的信息框。

1、基本实例

<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">

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

//JavaScript 方法
 $(\'.close\').on(\'click\', function () { 
$(\'#alert\').alert(\'close\'); 
})

2、Alert 插件中事件有四种

//事件，其他雷同
 $(\'#alert\').on(\'close.bs.alert\', function () { 
alert(\'当 close 方法被触发时调用！\');
 });