Jquery Hide By Clicking Outside Of Div

Hello, I'm trying to make a JavaScript dynamic display of an image. Here’s my code:

).click(function (e) { // Used to stop the event bubbling.. e.stopPropagation() $('.info_image_click').show(); }); // Hide the "info_image_click" by clicking outside container $(document).click(function () { $('.info_image_click').hide(); });

Solution 2:

try using

$(document).not('. info_image_click').click(function() {
    // Do your hiding stuff here.
});

Solution 3:

Add body click:

<script>
 $('.info_image').click(function () {
            $('.info_image_click').show();
            $("body").click(function () {
                $("info_image_click').hide();
            });
        });
</script>

Solution 4:

If possible try to change your DOM,then there is no need of jQuery also

<ahref="your large image"><imgsrc="your small image"></a>

Solution 5:

If what you are trying to do is to get your image to be modal (i.e. the page below is inactive until the image is hidden), you can create an invisible overlay (with a very small opacity, typically 0.01) that is the same size of your page, and covers it, and has a z-index (a "vertical" position) between that of your page (which would typically be 0), and that of your "modal" zone (i.e. in this case the info_image_click image), which can be anything larger than 0.

Then you set the overlay click event so the image and the overlay get hidden when the overlay gets clicked.

By doing this, you ensure that when a user clicks on the window, if its inside the image, nothing happens (since the image has a higher z-index it will get the click event, which is not assigned), and if its outside the image, the overlay (and not the page, since it has a lower z-index) will get the click event and do what you want (hide the image and the overlay, thus returning to the main page).

You can put the overlay to a higher opacity than 0.01 if you want it to be a clue to the user that the image is modal.

Quick draft of how I would do it in jQuery:

showWindowModal: function(windowSelector) {
    $("<div></div>")
        .addClass("overlay")
        .appendTo($("#main"))
        .css({
            width: $("#main").outerWidth(),
            height: $("#main").outerheight()
        })
        .click(function() {
            $(windowSelector).remove();
            $("#main > div.overlay").remove();
        });
    $(windowSelector).addClass("modal").show();
}

css classes:

#main > div.overlay
{
    position: absolute;
    background: white;
    z-index: 100;
    opacity: 0.5;
    filter:alpha(opacity=50); /* For IE8 and earlier */
}

.modal
{
    z-index: 1000;
}

Share