Question

SOLUTION BELOW

I’ve read through most questions around here concerning this concept, but I can’t seem to get it to work with an if-statement. Any help?

JSFiddle

$("button").click(function () {
  $("div").fadeToggle("fast");
});

if ($("div").is(":visible")) {
  $(document).click(function () {
    $("div").fadeToggle("fast");
  });

  $("div").click(function (e) {
    e.stopPropagation();
  });
}

So, the button should toggle the div. When the div is toggled (i.e. :visible) the div should only be toggled back (not visible) by clicking anywhere on the page, but not when clicking on the div itself.

Solution

I combined Diabolic’s answer and Kevin Bowersox’s answer into this one.

$("button").click(function (e) {
    $("div").fadeToggle("fast");
    e.stopImmediatePropagation();
});

$(document).click(function (e) {
    if($("div").is(":visible") && !$("div").is(e.target)) {
        $("div").fadeOut("fast");
    }
});

Answer 1

Javascript

$("button").click(function (e) {
  $("div").fadeToggle("fast");
});

$(document).mouseup(function(event){
    var target = $("#no-mod");
    if(!target.is(event.target) && !$("button").is(event.target) && target.is(":visible")){
       $("div").fadeToggle("fast");
    }else{
      return false;
    }
});

HTML

<button>Click me</button>
<div id="no-mod"></div>

Example: http://jsfiddle.net/2udYp/9/