마우스 클릭시 근처에 레이어 띄우기

<style>

.element{width:500px;}

#layer{display:none; padding:10px; background:#e6e6e6;}

#layerClose{font-size:15px; float:right;}

.element:hover, #layerClose:hover{cursor:pointer; opacity:0.8;}

</style>

<img class="element" src="food.jpg">

<img class="element" src="food.jpg">

<img class="element" src="food.jpg">

<div id="layer">

<p>음식입니다.</p>

<span id="layerClose">닫기X</span>

</div>

<script>

$('.element').click(function(e) {

var divTop = e.clientY - 20; //상단 좌표

var divLeft = e.clientX - 40; //좌측 좌표

$('#layer').css({

"top": divTop

,"left": divLeft

, "position": "absolute"

}).show();

});

$("#layerClose").click(function(){

$('#layer').css('display','none');

});

</script>