贴上代码,回顾用,第一段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;
}