在屏幕上单击时，弹出框未隐藏

Question

im trying to fix a popover on an image click im trying to do something like in the way that if i click on the image the popover shows if i agian click the image it hides, but i want something more if i click out of the image and popover it sholud be hide any help would be appriciated, thanks.

$("#popup-img").click(function () {

    if ($(".popup").is(":hidden")) {
        $(".popup").slideDown("fast");
    } else {
        $(".popup").slideUp("fast");
    }
    if ($(".popup").is(":visible")) {
        // i thin here code should be if i click out of the popover 
        // it should be hide again
    }
});

Answer 1

$("#popup-img").click(function () {

    if ($(".popup").is(":hidden")) {
        $(".popup").slideDown("fast");
    }
});
$(window).click(function () {

    if ($(".popup").is(": visible")) {
        $(".popup").slideUp("fast");
    }
});

Answer 2

I think you want something like:

$("#popup-img").click(function () {
    $(".popup").slideDown("fast");
    $("body").click(function() {
        $(this).unbind("click");
        $(".popup").slideUp("fast");
    }
});

Answer 3

If your using bootstrap as indicated by the tag this is very simple since bootstrap provides this functionality by default:

HTML

<div id="popup-img"> Click</div>
<div class="popup modal hide">This is a popup</div>

Javascript

$("#popup-img").click(function(){
    $(".popup").modal();
});