아는 것이 좋은 것이다.

[jQuery] jQuery 레이어 팝업, 마우스 위치에 창 띄우기 본문

jQuery

[jQuery] jQuery 레이어 팝업, 마우스 위치에 창 띄우기

start0 2014. 6. 4. 10:35
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<style type="text/css">
#divView {
position:absolute;
display:none;
background-color:#ffffff;
border:solid 2px #d0d0d0;
width:350px;
height:150px;
padding:10px;
}
</style>

<input type="button" class="imgSelect" serial="aa" idx="11" alt="버튼1" value="버튼1"/><!-- 임의로 serial, idx 삽입하여 스크립트로 값을 받게 할 수 있다. -->

<input type="button" class="imgSelect" serial="bb" idx="22" alt="버튼2" value="버튼2"/>

<input type="button" class="imgSelect" serial="cc" idx="33" alt="버튼3" value="버튼3"/>


<div id="divView"></div>

<script type="text/javascript">
//-- 버튼 클릭시 버튼을 클릭한 위치 근처에 레이어 생성 --//
$('.imgSelect').click(function(e) {
var divTop = e.clientY - 40; //상단 좌표 위치 안맞을시 e.pageY
var divLeft = e.clientX; //좌측 좌표 위치 안맞을시 e.pageX
var serial = $(this).attr("serial");
var idx = $(this).attr("idx");
$('#divView').empty().append('<div style="position:absolute;top:5px;right:5px"><span id="close" style="cursor:pointer;font-size:1.5em" title="닫기">X</span> </div><br><a href="?serial=' + serial + '">serial</a><BR><a href="?idx=' + idx + '">idx</a>');
$('#divView').css({
     "top": divTop
     ,"left": divLeft
     , "position": "absolute"
}).show();
$('#close').click(function(){document.getElementById('divView').style.display='none'});
});

</script>
Comments