javascript - 单击屏幕时弹出窗口不隐藏

Question

我试图修复图像上的弹出框点击我试图做类似的事情，如果我点击图像，如果我再次点击它隐藏的图像，弹出框会显示，但如果我点击图像，我想要更多的东西并且popover应该隐藏任何帮助，谢谢。

$("#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

我想你想要这样的东西：

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

Answer 3

如果您使用标签指示的引导程序，这非常简单，因为引导程序默认提供此功能：

HTML

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

Javascript

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