javascript - 如果在特定元素之外单击，则删除具有特定类的所有元素

Question

我正在继续我已经开始的元素 here .

基本上，这是在单击时在链接的相对位置动态创建工具提示弹出窗口。我现在需要做的是在页面上的任何地方注册点击时关闭它们，但类为“tooltip-dialog”的元素除外。我想单击以从 DOM 中删除类为“dialog-anchor”的元素的所有实例。除此之外，我希望一次只允许激活一个工具提示弹出窗口。

我昨天晚上玩了几个小时，但不确定如何实现预期的功能。如果有人愿意花时间向我解释如何去做，我将不胜感激。

这是到目前为止的代码。目前，这只会在点击时生成新的工具提示。

$(function() { //jquery document.ready

  $('a.tooltip').on('click', function(e) {
    var $this = $(this);
    e.preventDefault();

    $this.prepend('<div class="dialog-anchor"><div class="dialog-container"><div class="tooltip-dialog"><h4>' + $this.data('title') + '</h4><p>' + $this.data('content') + '</p></div><div class="bg"></div></div></div>');

  });

});

在触发工具提示弹出窗口之前，链接的页面 HTML 看起来像这样:

<a class="tooltip top" data-title="This is a tooltip" data-content="blah blah blah blah blah blah blah blah blah"></a>

Answer 1

所以你有一个相对定位的 .dialog-anchor 元素:

$this.prepend('<div class="dialog-anchor">...</div>');

添加一个空的 dialog-overlay 元素:

$this.prepend('<div class="dialog-overlay"></div>');
$this.prepend('<div class="dialog-anchor">...</div>');

现在，在你的 CSS 中:

.dialog-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  background: rgba(0,0,0,1);
}

.dialog-anchor {
  z-index: 3;
}

对话框将位于叠加层上方。叠加层是覆盖整个屏幕的透明层。向叠加层添加点击处理程序:

var $overlay = $('<div class="dialog-overlay"></div>');
var $anchor = $('<div class="dialog-anchor">...</div>');
$overlay.on('click', function() {
  $anchor.remove();
});
$this.prepend($overlay);
$this.prepend($anchor);

此解决方案允许您执行其他效果，例如使页面的其余部分变暗，如下所示:

background: rgba(0,0,0,0.6);