找到你要的答案

Q:Close overlay after click outside div

Q:单击“外部div后关闭覆盖

Here is my demo link : http://jsfiddle.net/euavm0mo/1/

I want to close overlay after click outside the form element .

Now it's not opening or close overlay whenever you click .

Thanks

 //Search
$("#block-block-3 p").click(function() {
    $(".searchform-overlay").addClass("header-search-active");

});

$(".close-btn").click(function() {
    $(".searchform-overlay").removeClass("header-search-active");
});

});

//    $(document).on("click", function (e) {


//   if (e.target.id == "searchform-container" || !$(e.target).closest("#searchform-container").length) {
//  $(".searchform-overlay").removeClass( "header-search-active" ); //
//}

这是我http://jsfiddle.net/euavm0mo/1/演示环节:

我想在窗体元素外点击关闭覆盖。

现在它不是打开或关闭覆盖每当你点击。

谢谢

 //Search
$("#block-block-3 p").click(function() {
    $(".searchform-overlay").addClass("header-search-active");

});

$(".close-btn").click(function() {
    $(".searchform-overlay").removeClass("header-search-active");
});

});

//    $(document).on("click", function (e) {


//   if (e.target.id == "searchform-container" || !$(e.target).closest("#searchform-container").length) {
//  $(".searchform-overlay").removeClass( "header-search-active" ); //
//}
answer1: 回答1:

This should do it: http://jsfiddle.net/x0v91ena/

The overlay closes when the user doesn't click on the paragraph, the input fields or the small wrapper around it.

$(document).ready(function () {

    //Search
    $("#block-block-3 p").click(function () {
        $(".searchform-overlay").addClass("header-search-active");

    });
    $(".close-btn").click(function () {
        $(".searchform-overlay").removeClass("header-search-active");
    });

    $(document).click(function (e) {
        if ($(".searchform-overlay").hasClass("header-search-active")) {
            if (!$('#search-form').is(e.target) && !$('input').is(e.target) && !$('#open').is(e.target)) {
                $(".searchform-overlay").removeClass("header-search-active");
            }
        }
    });
});

这应该做的:http://jsfiddle.net/x0v91ena/

当用户不单击段落、输入字段或周围的小包装时,覆盖层会关闭。

$(document).ready(function () {

    //Search
    $("#block-block-3 p").click(function () {
        $(".searchform-overlay").addClass("header-search-active");

    });
    $(".close-btn").click(function () {
        $(".searchform-overlay").removeClass("header-search-active");
    });

    $(document).click(function (e) {
        if ($(".searchform-overlay").hasClass("header-search-active")) {
            if (!$('#search-form').is(e.target) && !$('input').is(e.target) && !$('#open').is(e.target)) {
                $(".searchform-overlay").removeClass("header-search-active");
            }
        }
    });
});
jquery  html  css