팝업 같은 레이어 만들기. (투명 레이어 효과)

이번 프로젝트에 플래시를 쓰지않고 플래시와 같은 반투명 레이어를 만드는것이 이슈가 되서..

한번 만들어 봤다..

IE/FF 모두 동작한다..

흠... 간단한 예제는 그렇게 복잡하지 않지만..

게시판 정도 붙이려면.. 노가다가 필요하겠는걸.. ㅡㅡ;;

아래 소스를 Editplus 나 기타 HTML 에디터에 붙여 넣고, 실행하면 동작 한다.

네이버 버튼을 누르면 팝업이 뜨고 팝업의 닫기 버튼을 누르면, 없어진다.

원리는 filter 옵션을 주어 반투명하게 만들고, 팝업을 띄우던 링크를 삭제 하고 숨겨져있던 레이어를 띄운다.

소스를 보시면 쉽게 아실듯....

협찬 : (공식적이진 않음) 레이싱걸 구지성씨...

Source View...

<script type="text/javascript">
 
 window.onload = function(){
  document.getElementById("registPopup").style.display="none";
  document.getElementById("bodyLayer").style.filter = "alpha(opacity=100)";
  document.getElementById("bodyLayer").style.opacity = "1";
 }
 

 function showPopup(){
  document.getElementById("registPopup").style.top = 450;
  document.getElementById("registPopup").style.left = 300;
  document.getElementById("test_btn").removeAttribute("href");
  document.getElementById("test_btn").style.cursor = "Arrow";
  document.getElementById("registPopup").style.display = "block";
  document.getElementById("bodyLayer").style.filter = "alpha(opacity=10)";
  document.getElementById("bodyLayer").style.opacity = "0.1";

 
 }

 function closePopup(){
  document.getElementById("test_btn").setAttribute("href","javascript: showPopup();");
  document.getElementById("test_btn").style.cursor = "Pointer";
  document.getElementById("registPopup").style.display="none";
  document.getElementById("bodyLayer").style.filter = "alpha(opacity=100)";
  document.getElementById("bodyLayer").style.opacity = "1";
 }
</script>

  <div id="registPopup" style="position: relative;z-index:1;width:200;height:100; background-color: #F5F5F5;">
  <h3>투명위에 뜨는 팝업....</h3>
  <input type="button" onclick="closePopup();" value="닫기" />
 </div>

 <div id="bodyLayer" style="z-index:0;position:absolute;top:0;width:227;height:27" >
 <iframe name="imgFrame" id="imgFrame" src="http://blogfiles6.naver.net/data28/2008/2/1/181/%B1%B8%C1%F6%BC%BA102_ghkdwo412.jpg" width=600 height=900 scrolling=no frameborder=0></iframe>
 <br />
 <br /><a id="test_btn" href="javascript: showPopup();"><img src="http://sstatic.naver.com/search/images11/logo_naver.gif" border=0 /></a>
 </div>