当前位置：首页 > 网页特效 > 弹出层

基于Bootstrap的轻量级弹出提示框插件

分类：弹出层日期：2024-05-14 点击(1) 评论(0)

简介

webui-popover是一款基于Bootstrap的轻量级弹出提示框Tooltip插件。该提示框插件可以和Bootstrap完美结合，但是并不一定需要和Bootstrap一起使用。它支持IE8以上的浏览器。它的特点有：

- 运行速度快，轻量级。
- 支持多种定位方式。
- 能自动计算提示框位置。
- 在提示框中提供关闭按钮。
- 同一个页面支持多个提示框实例。
- 支持不同的样式。
- 支持使用url和iframe。
- 支持异步加载模式。
####  使用方法

------------

使用这个提示框插件首先需要引入jQuery和jquery.webui-popover.js,jquery.webui-popover.css文件。

```html
<link rel="stylesheet" href="jquery.webui-popover.css">
<script src="jquery.js"></script>
<script src="jquery.webui-popover.js"></script>
```                
#####  调用插件
可以使用下面的方法来调用一个提示框。

```html
$('a').webuiPopover(options);         
```
####  配置参数

------------

####  应用举例

------------

创建一个简单提示框：

```html
$('a').webuiPopover({title:'Title',content:'Content'});    
```            
通过DOM元素的data-*首先来创建提示框：

```html
<a href="#" data-title="Title" data-content="Contents..." data-placement="right"></a>   
```             
```html
$('a').webuiPopover();   
```             
在元素的下方插件一个提示框：

```html
$('a').webuiPopover({title:'Title',content:'Content',placement:'bottom'});    
```            
在鼠标滑过元素时弹出一个提示框：

```html
$('a').webuiPopover({title:'Title',content:'Content',trigger:'hover'});     
```           
创建一个inverse样式的提示框：

```html
$('a').webuiPopover({title:'Title',content:'Content',style:'inverse'});    
```            
创建一个固定宽度和高度的提示框：

```html
$('a').webuiPopover({title:'Title',content:'Content',width:300,height:200});   
```             
创建一个带关闭按钮的提示框：

```html
$('a').webuiPopover({title:'Title',content:'Content',closeable:true});    
```            
创建一个带动画效果的提示框：

```html
$('a').webuiPopover({title:'Title',content:'Content',animation:'pop'});  
```              
创建一个内容使用iframe的提示框：

```html
$('a').webuiPopover({type:'iframe',url:'https://www.baidu.com'}); 
```               
通过异步模式插件一个提示框：

```html
$('a').webuiPopover({   
    type:'async',
    url:'https://api.github.com/',
    content:function(data){
        var html = '<ul>';
        for(var key in data){html+='<li>'+data[key]+'</li>';}
        html+='</ul>';
        return html;
    }   
});  
```              
创建一个提示框，并通过手动方式来触发它：

```html
//Initailize 
 $('a').webuiPopover({trigger:'manual'});
 
...
 
 //Show it
 $('a').webuiPopover('show');  
```

web299.com

基于Bootstrap的轻量级弹出提示框插件

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果