[Javascript] 버튼클릭으로 팝업창 만들기

안녕하세요

 

이번시간에는 버튼클릭으로 팝업창을 만들어보겠습니다.

 

*결과

 

---

1. getElementsByTagName

var height=document.getElementsByTagName("body")[0].scrollHeight;

getElementsByTagName()는 특정 태그를 가진 모든 요소를 선택합니다. 선택된 요소는 배열 객체로 반환됩니다.

 

 

2. jquery.css( propertyName, value )

$("#lay_pop").css("z-index","555");

.css()로 선택한 요소의 css 속성값을 가져오거나 style 속성을 추가합니다.

예제에서는 #lay_pop 요소에 스타일 속성을 추가하여 설정하였습니다.

 

3. 달러 기호 $

$("#all_body").css("display","block");

자바스크립트에서 Dollar Sign 은 document.getElementById처럼 사용되어 특정 id 속성을 가진 요소를 찾아냅니다.

 

 

4. 전체코드

<style>
	#lay_pop{position:absolute;z-index:500;width:600px;height:400px;overflow-y:scroll;display:none;background-color:#ffffff;border:2px solid #cccccc}
	#all_body{position:absolute;z-index:9;display:block;filter:alpha(opacity=50);opacity:0.5;-moz-opacity:0.5;background-color:#000000;left:0;top:0}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script language="javascript">
	function pushLayer(){
		var $width=parseInt($("#lay_pop").css("width"));
		var $height=parseInt($("#lay_pop").css("height"));
		var left=($(window).width()-$width)/2;
		var sctop=$(window).scrollTop()*2;
		var top=($(window).height()-$height+sctop)/2;
		var height=document.getElementsByTagName("body")[0].scrollHeight;
		$("#lay_pop").css("left",left);
		$("#lay_pop").css("top",top);
		$("#lay_pop").css("display","block");
		$("#lay_pop").css("z-index","555");
		$("#all_body").css("display","block");
		$("#all_body").css("width",$(window).width());
		$("#all_body").css("height",height);

	}
	function layerClose(lay1,lay2){
		$("#"+lay1).css("display","none");
		$("#"+lay2).css("display","none");
	}
</script>

<div id="lay_pop"><a href="javascript:;" onclick="layerClose('lay_pop','all_body')">닫기</a></div>
<div id="all_body"></div>
<input type="button" value="레이어" onclick="pushLayer()">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>