티스토리에서 Javascript로 레이어 팝업 띄우기

<style type="text/css">
#layerPop{width:600px;height:250px;position:fixed;top:50px;left:200px;border:1px solid #ccc;padding:20px;}
#layerPop .close{position:absolute;bottom:30px;right:30px;}
</style>
<script type="text/javascript">
//close
function closeLayer(IdName){
var popup = document.getElementById(IdName);
popup.style.display = "none";
}
</script>

이왕 공지올릴때 쓴거 포스팅이라도 해놓으려고요.
이제부터 급한공지는 레이어팝업으로 띄우려하는데요.

여기서 레이어 팝업이란?
보통 팝업은 새로운 자식윈도우를 띄우는건데요
레이어 팝업은 이와 다르게 부모윈도우 자체에, 홈페이지 자체에 붙여놓는 그런 원리입니다.

코드를 간단하게 설명하면

style(css)부분과

script(java script)부분으로 나뉘는데요.

css영역

<style type="text/css">css 사용 선언

[#layerPop] layerPop 이라는 클래스에 적용

[width:600px;height:250px;] 팝업 레이어 크기

[position:fixed;top:50px;left:200px;] 레이어 위치(fixed는 화면 스크롤에 따라 무빙시키기 위해 사용했습니다.)

[border:1px] 테두리

[solid #ccc;] 선 색

[padding:20px;] 여백 크기

[#layerPop .close] layerPop 클래스 안의 close 클래스에 적용

[position:absolute;bottom:30px;right:30px;] 레이어 위치(얜 어차피 레이어에고정되있을거니깐 absolute를 사용했고요)

java script 영역

<script type="text/javascript"> java script 사용 선언

function closeLayer(IdName) IdName이라는 매개변수를 가진 팝업 종료용 함수 선언

var popup = document.getElementById(IdName); popup변수에 매개변수로 받은 아이디 연결(표현어렵다)

popup.style.display = "none"; display를 none해준다. 닫기 효과를 내기위하여 레이어를 숨김

html부분에 넣을 때는

<div class="layerPop">으로 묶어준 다음

닫기버튼은 <a href="#" onclick="closeLayer('layerPop')" class="close"> 처럼 a태그로 사용하면 됩니다.