Question

我正在使用webui popover的代码是

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

pre_elem_at = document.createElement("a");
                        pre_elem_at.setAttribute("class", "show-pop-async");
                        pre_elem_at.setAttribute("href", "javascript:void(0)");
                        pre_elem_at.setAttribute("style", "font-size: 14px;margin-left: 15px;background-color: white;padding: 5px;cursor: pointer;");
                        pre_elem_at.innerHTML = 'Get Link';
                        pre_elem_at.post_id = posts[i].id;
                        // $(pre_elem_at).webuiPopover();

                        $(pre_elem_at).webuiPopover('destroy').webuiPopover({
                            type:'async',
                            url:'timeline/pullrequest/share_post?share_link=1&cred='+posts[i].id,
                            content:function(data){

                                data = JSON.parse(data);
                                var html ='<div style="margin:0px; width:100%; overflow:hidden;" class="input-group mb-3">';
                                html += '<div class="input-group-prepend">';
                                html += '<button style="border-radius:2px 0 0 2px;" class="btn btn-primary btn-outline-secondary" type="button">Copy</button>';
                                html += '</div>';
                                html += '<input style="color:#333" value="'+data.share_link+'" type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">';
                                html += '</div>';
                                return html;
                        },
                        width:'397',
                        height:'16',
                        padding:false,
                        margin:false,
                         trigger: 'click',
                        cache:false,
                        multi:false

                    });
}

效果很好，但是我有一个问题。弹出窗口不会关闭..即使我添加了“ closeable：true”并单击“ x”图标..它仍然不会关闭.. 如果删除type：async属性，它将正确关闭弹出窗口，但无法在其中加载div。因为它是ajax调用。

Answer 1

我在pre_elem_at.addEventListener上添加了webui弹出窗口

pre_elem_at.addEventListener("click",function(e){
                            var pid = e.target.post_id;
                            $(this).webuiPopover({
                            type:'async',
                            url:'timeline/pullrequest/share_post?share_link=1&cred='+pid,
                            content:function(data){

                                data = JSON.parse(data);
                                var html ='<div style="margin:0px; width:100%; overflow:hidden;" class="input-group mb-3">';
                                html += '<div class="input-group-prepend">';
                                html += '<button style="border-radius:2px 0 0 2px;" class="btn btn-primary btn-outline-secondary" type="button">Copy</button>';
                                html += '</div>';
                                html += '<input style="color:#333" value="'+data.share_link+'" type="text" class="form-control" placeholder="" aria-label="" aria-describedby="basic-addon1">';
                                html += '</div>';
                                return html;
                        },
                        width:'397',
                        height:'16',
                        padding:false,
                        margin:false,
                         trigger: 'click',
                        cache:false,
                        multi:false
                    });
                    $(this).webuiPopover('show');
                });

并在我的索引文件中添加了一个webui破坏者

//已更新，以排除弹出窗口

$(document).on('blur','.show-pop-async, .xpopover',function(e){
var xthis = this;
setTimeout(function(){
   elem = document.activeElement; // This is the element that has focus
   str = $(elem).attr('class');
   arr = str.split(" ");
   n = arr.includes("xpopover");
    if(!n){
      $('.show-pop-async').webuiPopover('destroy');
    }

},1);

}）;

webui popover无法关闭

1 个答案: