我的网站有一个地图上有多个弹出窗口(只是具有背景图像的div)和可点击的图标:
当点击这些图标时,会显示一个弹出窗口。该弹出窗口有一个包含文本链接的轮播图:
当我在弹出窗口外单击时,所有弹出窗口都会隐藏。这似乎可以正常工作。我从此 Stack Overflow 问题中得到了代码。
但是真正的问题发生在你再次单击弹出窗口以外的区域隐藏它时。弹出窗口虽然被隐藏了,但仍然存在于DOM中。这意味着链接仍然可以被点击!
当我单击加号图标隐藏弹出窗口时,弹出窗口被隐藏(删除?),但是当单击加号以外的任何地方时(即页面上的任何位置),弹出窗口仍然存在(但不可见),就在</body>
上面。
请帮帮我!这真的很恼人.. :(
编辑:值得一提的是,弹出窗口是动态添加的:
$('.plus').each(function(i) {
var $self = $(this);
$self.popover({
html: true,
title: false,
placement: function() {
return 'auto left'; // TODO: calculate placing
},
content: function() {
var html = '<div id="carousel-' + i + '" class="carousel slide">';
var list = '<ol class="carousel-indicators">';
var slides = '<div class="carousel-inner">';
var count = 0;
$('.post[data-category="' + $(this).data('category') + '"]').each(function(j) {
// add indicator for slide
list += '<li data-target="#carousel-' + i + '" data-slide-to="' + count + '"' + (count == 0 ? ' class="active"' : '') + '></li>';
// add html for slide
slides += '<div class="item' + (count == 0 ? ' active' : '') + '">' + $(this).html() + '</div>';
// increase counter
count++;
});
// merge all html
html += list + '</ol>' + slides + '</div></div>';
return html;
}
});