CODEWITHSUNDEEP
jqueryhtmlcss
Pavo Gabrić
Pavo Gabrić

Reputation: 209

jQuery hide by clicking outside of div

Hello,

I'm trying to make a JavaScript dynamic display of an image.

Here’s my code:

<div class="info_image_click" style="display: none;">
    <img src="slike/info_slika_click.jpg" />
</div><!--kraj info_image_click-->

<a href="javascript:void(null);">
    <div class="info_image" style="margin: 0px auto;">
        <img src="slike/info_slika.jpg"/>
    </div>
</a><!-- info slika -->

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

When someone clicks on "info_image" (that's the small picture) it opens the "info_image_click" (that's the large picture). I don't know how users can hide the "info_image_click" by clicking outside container in which he is. Sorry about my english :)

Upvotes: 3

Views: 10652

Answers (5)

palaѕн
palaѕн

Reputation: 73966

Try this:

$('.info_image').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();
});

Upvotes: 6

Evren Kuzucuoglu
Evren Kuzucuoglu

Reputation: 3885

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

Upvotes: 0

Mahesh.D
Mahesh.D

Reputation: 1689

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

<a href="your large image"><img src="your small image"></a>

Upvotes: 0

Stijn Geukens
Stijn Geukens

Reputation: 15628

Add body click:

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

Upvotes: 1

Corfitz.
Corfitz.

Reputation: 1884

try using

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

Upvotes: 1

Related Questions