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;
}

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

你认识小汐吗

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值