как скрыть элемент с помощью jquery при нажатии за пределами элемента

До сих пор я могу захватить src изображения и отобразить его в фиксированном разделе, вроде как всплывающее окно. Но я хочу скрыть элемент div, когда мышь вызывается за пределами div. Пожалуйста, помогите мне, как это сделать, а также, пожалуйста, исправьте меня, если мой код может быть улучшен. Благодарю!

ЯШ:

$(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>