jquery - webui弹出窗口不关闭
问题描述
我使用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 属性它将关闭popover 正确,但我无法在其中加载我的 div。因为它是一个ajax调用。
解决方案
我在 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);
});
推荐阅读
- python - Hash an integer in Python to match Oracle's STANDARD_HASH
- agda - 如何说服 Agda 函数以一对内的减少数终止?
- ruby-on-rails - 必须在数据库的相关表中填写外键吗?
- java - recyclerviewadapter 未使用片段附加
- reactjs - Can I track nested object changes in React Context?
- c# - 访问网页时处理windows安全
- c# - 支持遍历 DataTable 中的数据行的 C# 模板引擎
- joomla - 尝试在本地主机上编辑 Joomla 时出现 HTTP 错误
- json - 解码 Json 不起作用,也不给出错误
- tsql - 为什么 (Col <> value AND Col is null) 不返回任何空值?