popover插件使用

贴上代码,回顾用,第一段js是实现点击弹出框其他地方弹出框隐藏的js。

提供官方popover API链接http://getbootstrap.com/docs/4.0/components/popovers/

//点击popover其他地方,就隐藏弹出框
$('body').click(function (event) {
    var target = $(event.target);       // 判断自己当前点击的内容
    if (!target.hasClass('popover')
        && !target.hasClass('popover')
        && !target.hasClass('popover-content')
        && !target.hasClass('popover-title')
        && !target.hasClass('arrow')
        && !target.hasClass('pop')
        && !target.hasClass('pop-icon')
        && !target.hasClass('param-table')) {
        $('.pop').popover('hide');      // 当点击body的非弹出框相关的内容的时候,关闭所有popover
    }
});

//点击icon,弹出参数框
$(".popover").click(function (event) {

    var element = $(this);
    var param = element.data("param");
    element.popover({
        trigger: 'manual', //设置触发弹出框时间类型,还有click,hover等
        placement: 'top', //top, bottom, left or right,设置弹出的方向
        title: "参数", //弹出框标题
        html: 'true', //如果为true向弹出框中插入HTML,false则html标签不会被解析,直接显示
        content: ContentMethod(param),
    })

    $/*('.pop').popover('hide'); */         // 当点击一个按钮的时候把其他的所有内容先关闭。
    $(this).parent().popover('toggle');          // 然后只把自己打开。

    $(".publicate").click(function(){
        toastr.success('复制成功!');
    });
    new ClipboardJS('.publicate');//复制到剪切板插件
});


function ContentMethod(param) {
    var content =  `<table></table>`;
    return content;
}

猜你喜欢

转载自blog.csdn.net/sayoko06/article/details/84574849