bootstrap中popover.js(弹出框)使用总结+案例

小灰灰 2022-07-16 12:14 274阅读 0赞

**bootstrap中popover(弹出框)使用总结+案例**

[bootstrap的官方文档][bootstrap](不过是英文的)

## 一. popover常用配置参数： ##

//常用配置参数：
    $(document).ready(function() { 
        $('#temp').popover(
            {
                trigger:'click', //触发方式
                template: '', //你自定义的模板
                title:"标题",//设置 弹出框 的标题
                html: true, // 为true的话，data-content里就能放html代码了
                content:"",//这里可以直接写字符串，也可以 是一个函数，该函数返回一个字符串；
            }
         );
    }
    //常用方法：
    $('#element').popover('show');
    $('#element').popover('hide');
    $('#element').popover('destroy')

## 二. 案例分析： ##

1.  案例要求：动态产生一个按钮，并给页面中所有具有data-toggle=”popover”属性的元素绑定popover(弹出框)效果，触发方式：当鼠标指针放到元素上时弹出弹出框，离开元素时，弹出框消失；弹出框内容要求：一定要包含该触发弹窗元素的文本信息；
2.  html代码：（注意引入bootstrap.js和样式）

1.  js代码：

1.  效果图：
2.    
    ![效果图][20161018115459005]

**遇到的一些小问题：**

1.  弹出框的最大宽度有默认值：276px；（bootstrap.css）

.popover { position: absolute; top: 0; left: 0; z-index: 1060; display: none; max-width: 276px; padding: 1px; font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px; font-style: normal; font-weight: normal; line-height: 1.42857143; text-align: left; text-align: start; text-decoration: none; text-shadow: none; text-transform: none; letter-spacing: normal; word-break: normal; word-spacing: normal; word-wrap: normal; white-space: normal; background-color: #fff; -webkit-background-clip: padding-box; background-clip: padding-box; border: 1px solid #ccc; border: 1px solid rgba(0, 0, 0, .2); border-radius: 6px; -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .2); box-shadow: 0 5px 10px rgba(0, 0, 0, .2); line-break: auto; }

如果在里面嵌入一个表格，表格的宽度超过了弹出层的宽度，那么表格就会溢出，如图：

![表格溢出][20161018120010570]

可以修改或者覆盖`.popover`的属性，如果只在一个页面中需要修改在其他页面不需要修改时，则可以在这个页面修改`.popover`的属性，这是我在项目中的修改：

.popover { width:auto; max-width:800px; }

效果如图：

![表格正常][20161018120411705]

可见表格正常显示。

2.如果给多个按钮一起绑定了`popover`，但是在使用的时候只想让一次只出现一个弹出层，如果在点击的时候设置其他绑定了`popover`弹出层隐藏，再让点击的这一个弹出层显示，如下：

$("button").popover({placement:"left",title:"这是一个弹出层",content:"这特么的是内容！",trigger:" click"});
    $("button").each(function(){ 
        $(".popover").hide();   //或者$(".popover").popover("hide");
        $(this).popover("show")
    });

这样在显示的时候是没有问题的，但是在第二次或以后再次点击已经被隐藏的弹出层按钮的时候，弹出层会闪动一下，效果不好看。

后来又研究了一下，`popover`的触发方式有四种，分别是：`hover`、`click`、`focus`、`manual`，其中`manual`是手动触发，即使用`$(element).popover("show")`和`$(element).popover("hide")`的方式，那么我们可以将所有绑定了`popover`的按钮的`trigger`改为`manual`，在每个事件中将其他所有`.popover`隐藏，将点击的这个显示，这样便不会出现画面一闪的情况。

$("button").popover({placement:"left",title:"这是一个弹出层",content:"这特么的是内容！",trigger:" manual"});
    $("button").each(function(){ 
        $(".popover").popover("hide");
        $(this).popover("show")
    });

[bootstrap]: http://v3.bootcss.com/javascript/#popovers
[20161018115459005]: /images/20220716/f79d6c9e07e943bf9684e292a0c85935.png
[20161018120010570]: /images/20220716/afd8ab39ca4c4df8befa009475c6b7bf.png
[20161018120411705]: /images/20220716/42d3cde4f7f64398989a0466a5457ece.png