Question

我有一个动态填充的表格，并且我在每个表格行中添加了一个webui-popover。要使其可见，必须单击链接项。我正在使用手动触发来控制其可见性。

我的问题是，当一个弹出窗口可见时，当我在流行区域外点击时，我无法隐藏它。该文档允许将dismissable设置为true，但这也不起作用。任何帮助表示赞赏。

 //Sample html
 <tr>
  <td>name</td>
    <td><a class="more" id="'.$id.'" data-fid="'.$fid.'" data-uplid="'.$uplid.'"  href="javascript:void(0);"><i class="material-icons">more_horiz</i></a></td>
   </tr>

用于显示动态弹出窗口的Javascript

var more = document.getElementsByClassName('more');

for (var i = 0; i < more.length ; i++) {

    var fid, uplid;

    more[i].onclick = function(){

     fid = this.dataset.fid;
     uplid = this.dataset.uplid;

     //Popover
     $('#' + fid).webuiPopover({
      content: function(){
       var html = '<div id="pop-content">';
        html += '<a href="core/upload/'+fid+'/'+uplid+'" class="collection-item active">Edit</a>';
        html += '</div>';
        return html;
      },
      trigger: 'manual',
      dismissible: true,
      style: 'v2',
      placement: 'bottom-left',
      animation: 'pop',
      width: '180',
      cache: false
     });

    //Once the values have been passed, show the popover
    $('#' + fid).webuiPopover('show');
  }
}

一旦鼠标不在目标中，我需要隐藏它，任何想法？

Answer 1

您必须使用：

trigger: 'click'

此外，删除＆＃39; onclick＆＃39;事件监听器和封装弹出窗口内容的函数：

JSFIDDLE

如何在不在焦点时隐藏webui-popover（JQuery）

1 个答案: