一．弹出框
- 弹出框即点击一个元素弹出一个包含标题和内容的容器。
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>×</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 方法被触发时调用！'); });