DIV 레이어 팝업 띄우는방법.

DIV 레이어 팝업 띄우는방법. 

화면에 DIV를 한개 생성한다. 

<div id="popup_layer" 
style="position:absolute; //절대위치다. 현재화면의 위에 겹쳐서 보여준다. 
border:double; //border의 종류는 인터넷을 찾아보면 많이 나온다. 
top:100px; //화면상단에서부터 100px(pixel)떨어진 위치에 레이어를 위치한다. 
left:100px; //화면왼쪽에서부터 100px(pixel)떨어진 위치에 레이어를 위치한다. 
width:100px; //div_layer의 좌우사이즈를 설정한다. 
height:100px; //div_layer의 높이를 설정한다. 
z-index:1; //이건 나도잘... 
visibility:hidden; //숨김옵션 
background-color:white; //div_layer의 뒷배경색을 설정한다. 미설정시 투명. 
"> 
내용을 입력한다. 
</div> 

버튼을 클릭시 레이어팝업이뜨게한다. 

<input type="button" value="click" onclick="fn_layer_popup()"> 

<script> 
function fn_layer_popup(){ 
var layer = document.getElementById("popup_layer"); 
layer.style.visibility="visible"; //반대는 hidden 
} 
</script> 

※ 추가사항. 
여러개의 버튼이 있고, 레이어가 존재할경우.. 버튼을 마우스로 클릭한 곳에서 레이어팝업이 뜨게하는 옵션. 

<script> 
function fn_layer_popup(){ 
var _x = event.clientX + document.body.scrollLeft; //마우스로 선택한곳의 x축(화면에서 좌측으로부터의 거리)를 얻는다. 
var _y = event.clientY + document.body.scrollTop; //마우스로 선택한곳의 y축(화면에서 상단으로부터의 거리)를 얻는다. 
var layer = document.getElementById("popup_layer"); 

if(_x < 0) _x = 0; //마우스로 선택한 위치의 값이 -값이면 0으로 초기화. (화면은 0,0으로 시작한다.) 
if(_y < 0) _y = 0; //마우스로 선택한 위치의 값이 -값이면 0으로 초기화. (화면은 0,0으로 시작한다.) 

layer.style.left = _x+"px"; //레이어팝업의 좌측으로부터의 거리값을 마우스로 클릭한곳의 위치값으로 변경. 
layer.style.top = _y+"px"; //레이어팝업의 상단으로부터의 거리값을 마우스로 클릭한곳의 위치값으로 변경. 

layer.style.visibility="visible"; 
} 
</script>

[출처] DIV 레이어 팝업 띄우는방법.|작성자 정민이

출처 - http://blog.naver.com/lklk777?Redirect=Log&logNo=156431122