Question

我正在继续我已经开始的项目here。

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

我昨天晚上玩了好几个小时，但我不确定如何实现预期的功能。如果有人愿意花时间向我解释如何解决这个问题，我将非常感激。

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

$(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);

Answer 2

一个选项是将侦听器绑定到文档以捕获冒泡的事件，检查它们来自何处，并查看它是目标类元素还是目标类元素。

$(document).on('click', function(e) {
    if (!$(e.originalTarget).hasClass('.tooltip-dialog') && !$(e.originalTarget).closest('.tooltip-dialog').length) {
        $('.tooltip-target').remove();
    }
});

这样做的好处是可以保证在工具提示之外捕获任何点击事件。

有两个缺点 - 首先它会在任何点击时触发（但点击不会经常发生，这可能是一个问题），一般情况下，应该谨慎地将事件绑定到document，虽然在这种特殊情况下，它是绑定它的正确元素，所以它实际上也不是一个很大的缺点。

Answer 3

尝试使用blur() jQuery事件。只需在元素外部的任何位置单击鼠标，或者甚至按键，如TAB键http://api.jquery.com/blur/

，它就会执行某些操作

 $(".dialog-anchor").not(".tooltip-dialog").blur(function(){
 //Do something
 });

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

3 个答案: