CODEWITHSUNDEEP
jqueryhtmlcss
Sadeghbayan
Sadeghbayan

Reputation: 1163

Close overlay after click outside 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" ); //
//}

Upvotes: 1

Views: 6665

Answers (1)

TheOnlyError
TheOnlyError

Reputation: 1451

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");
            }
        }
    });
});

Upvotes: 3

Related Questions