仅在身体单击上隐藏弹出窗口

Question

Hiding a div (for example #popover ) on click is easy:

$(document).ready(function() {
    $("#trigger").click(function(e) {
        $("#popover").toggle();
        e.stopPropagation();
    });

    $(document).click(function(e) {
        if (!$(e.target).is('#popover, #popover *')) {
            $("#popover").hide();
        }
    });
});

But isn't this function fired every time the user uses a click ? (Which does not make sense for me). Can I somehow limit this function to fire only if #popover is already visible?

Answer 1

In that case you can try using $(document).one(function(e) {...}); every time you show #example .

$(document).ready(function() {
    var didBindToBody = false;

    function closePopOverOnBodyClick() {
      didBindToBody = true;

      $(document).one('click', function(e) {             
          if (!$(e.target).is('#popover, #popover *')) {
              $("#popover").hide();
          }
          else {
              closePopOverOnBodyClick();
          }

          didBindToBody = false;
      });
    }

    $("#trigger").click(function(e) {
        $("#popover").toggle();
        e.stopPropagation();

        if (!didBindToBody && $("#popover").is(":visible")) {
            closePopOverOnBodyClick();
        }  
    });

    closePopOverOnBodyClick();
});

DEMO

Answer 2

You could try something like

$(document).click(function(e) {

    if (!$('#example').is(":visible")) {
        return false;
    } else if (!$(e.target).is('#popover, .login-panel *')) {
        $("#popover").hide();
    }
});

Or you could combine the two conditionals into one, just thought I'd keep it separate for readability and to make my suggestion easier to spot.