Notice
Recent Posts
Recent Comments
Link
«   2024/05   »
일 월 화 수 목 금 토
1 2 3 4
5 6 7 8 9 10 11
12 13 14 15 16 17 18
19 20 21 22 23 24 25
26 27 28 29 30 31
Tags more
Archives
Today
Total
관리 메뉴

I LOVE EJ

레이어 팝업 예제 본문

Web publishing/JavaScript

레이어 팝업 예제

BeOne 2010. 4. 8. 13:51

레이어팝업 예제.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 <head>
 <title> 레이어 팝업 예제 </title>
 <style type="text/css">
  #layerPop{width:600px;height:200px;position:absolute;display:none;border:1px solid #ccc;padding:10px;}
  #layerPop .close{position:absolute;bottom:5px;right:5px;}
 </style>
 <script type="text/javascript">
 <!--
 //레이어 팝업 열기
 function openLayer(IdName, tpos, lpos){
  var pop = document.getElementById(IdName);
  pop.style.display = "block";
  pop.style.top = tpos + "px";
  pop.style.left = lpos + "px";
 }

 //레이어 팝업 닫기
 function closeLayer(IdName){
  var pop = document.getElementById(IdName);
  pop.style.display = "none";
 }
  
 //-->
 </script>
 </head>
 <a href="#" onclick="openLayer('layerPop',100,200)">Open</a>
 <div id="layerPop">
 <strong>내용</strong>
 <ol>
  <li>레이어 팝업 열기: openLayer('레이어 팝업ID',top위치,left위치)</li>
  <li>레이어 팝업 닫기 closeLayer('레이어 팝업ID')</li>
  <li>첨부터 레이어 팝업을 보여줄라면 #layerPop에서 display:none; 제거</li>
 </ol>
 <a href="#" onclick="closeLayer('layerPop')" class="close">close</a>
 </div>
 <body>

 </body>
</html>

저작자표시

'Web publishing > JavaScript' 카테고리의 다른 글

팝업 풀사이즈  (0) 2010.06.18
Javascript - Mozila FireFox Copy Clipboard ( for Cross Browsing )  (0) 2010.05.19
특정 이미지만 출력해내기.  (0) 2010.03.12
html_replace - HTML관련 문자 치환  (0) 2009.06.10
퀵메뉴  (0) 2009.02.24
'Web publishing/JavaScript' Related Articles more