Remove all elements with specific class if clicked outside of specific element

Question

I am working from a continuation of the project that I have started here .

Basically, this is dynamically creating tooltip popups in a relative position to a link when clicked. What I now need to do is have them close when a click is registered anywhere on the page except for an element with the class of "tooltip-dialog". I would like the click to remove all instances of elements with the class of "dialog-anchor" from the DOM. In addition to this, I would like to have only one tooltip popup be allowed active at a time.

I played around with this for several hours yesterday evening, but am unsure of how to approach implementing the intended functionality. I would really appreciate if someone would be willing to take the time to explain to me how to go about this.

Here is the code thus far. Currently, This only generates the new tooltip on click.

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

  });

});

Here's what the on page HTML looks like for the links prior to firing the tooltip popup:

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

Answer 1

So you have a relatively-positioned .dialog-anchor element:

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

Add an empty dialog-overlay element:

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

Now, in your 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;
}

The dialog box will be above your overlay. The overlay is a transparent layer over your entire screen. Add a click-handler to the overlay:

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

This solution allows you to do other effects like dimming the rest of the page, like this:

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

Answer 2

One option is to bind a listener to the document to catch events bubbling up, check where they came from and see if that is either a target-class element, or inside a target-class element.

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

The upside of this is that it's guaranteed to catch any click event outside of the tooltip.

There are two downsides - first off it will trigger on any click (but click doesn't happen often enough that it's likely to be a problem) and in general, binding events to document should be done sparingly, although in this specific case, it is the correct element to bind it to so it's not actually a big downside either.

Answer 3

Try using the blur() jQuery event. It simply does something when the mouse is clicked anywhere outside the element, or even key presses like TAB key http://api.jquery.com/blur/

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