how to hide the element using jquery when clicked outside the element

Question

Till now I can grab the src of the image and display it in a fixed division, kind of like a pop up. But I want to hide the div element when the mouse is clicked outside the div. Please guide me how to do it, and also please correct me if my code can be improved. Thanks!

js:

$(document).ready(function () {
    $(".pic").hide();
    $(".screen").click(function () {
        display($(this));
    });
});

function display($this) {
    var source = $("img", $this).attr("src");
    $(".pic img").attr("src",source);
    $(".pic img").css("width","450px");
    $(".pic").show();
}

html:

            <div id="album">
                <div class="pic">
                    <img src="" />
                </div>

                <div class="screen">
                    <h1 class="title">Photo 1</h1>
                    <img src="images/1 png.png" class="image" />
                    <p class="description">This is a description</p>
                </div>

                <div class="screen">
                    <h1 class="title">Photo 1</h1>
                    <img src="images/2 png.png" class="image" />
                    <p class="description">This is a description</p>
                </div>
                <span class="clear_left"></span>

            </div>

possible duplicate of [How to detect a click outside an element?](http://stackoverflow.com/questions/152975/how-to-detect-a-click-outside-an-element) — mayabelle, Oct 23 '13 at 21:52

score 0 · Answer 1 · answered Oct 24 '13 at 15:38

0

blur event of jquery can be used

$(".screen").bind('blur',function () {
    hide($(this));
});

function display($this) {
    $(".pic").hide();
}

answered Oct 24 '13 at 15:38

Furquan Khan

1,586
1
15
30

score 0 · Answer 2 · answered Oct 24 '13 at 15:47

0

Try like this

$(document).click(function () {
    if ($(this).class != "pic") {
        $(".pic").hide();
    }
});

Live Demo

answered Oct 24 '13 at 15:47

Vinay Pratap Singh Bhadauria

9,829
3
28
49

No, its not giving errors. Before the images were displaying, now its not displaying. I am confused, i tried it giving after the `$(document).ready(function () {`. Could you please write the full code – Robin Oct 24 '13 at 20:53
Till now I can display the image when I click on it, like in here - http://jsfiddle.net/Robinlery/uXcm8/. But when I try it the way you told me, I can't display the image when I click on them. Will you please check on it - http://jsfiddle.net/Robinlery/vMX7Z/1/. Thanks. – Robin Oct 25 '13 at 14:57

how to hide the element using jquery when clicked outside the element

2 Answers2