| 일 | 월 | 화 | 수 | 목 | 금 | 토 |
|---|---|---|---|---|---|---|
| 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 |
- PHP
- Eclipse
- 블로그 조회수 늘리기
- oralce
- 소득세
- JSP
- Jrun
- .NET
- 갑근세
- 즐겨찾기 추가
- MSSQL
- JavaScript
- MySQL
- 블로그 수익화
- Administrator
- samba
- IIS
- 블로그 조회수
- CSS
- 인테리어그림
- Jexcel
- CVS
- 국민연금
- flash
- Adobe pdf reader
- Vista
- HTML
- 블루수국그림
- 에덴미술
- 블로그 방문자 늘리기
- Today
- Total
I LOVE EJ
딤드(deemed) 레이어 팝업 본문
레이어팝업_예제.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; padding:10px; border:4px solid #eee; background:#fff; display:none; z-index:100;}
#layerPop .close{position:absolute; bottom:5px;right:5px;}
#deemed{width:100%; height:100%; position:absolute; top:0; left:0; filter:Alpha(opacity=50);opacity:0.5; background:#000; z-index:1;}
</style>
<script type="text/javascript">
<!--
//Element ID 불러쓰기
function dEI(elementID){
return document.getElementById(elementID);
}
//레이어 팝업 열기
function openLayer(IdName, tpos, lpos){
var pop = dEI(IdName);
pop.style.top = tpos + "px";
pop.style.left = lpos + "px";
pop.style.display = "block";
var wrap = dEI("wrapper");
var reservation = document.createElement("div");
reservation.setAttribute("id", "deemed");
wrap.appendChild(reservation);
}
//레이어 팝엽 닫기
function closeLayer( IdName ){
var pop = dEI(IdName);
pop.style.display = "none";
var clearEl=parent.dEI("deemed");
var momEl = parent.dEI("wrapper");
momEl.removeChild(clearEl);
}
//-->
</script>
</head>
<body>
<div id="wrapper">
<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>
</div>
</body>
</html>
'Web publishing > JavaScript' 카테고리의 다른 글
| [js] 자바스크립트로 url 주소 가져오기 (1) | 2013.12.02 |
|---|---|
| 오른쪽 마우스 버튼 못쓰게 하기 (0) | 2011.02.16 |
| 새창. 팝업창에 포커스 주기 (1) | 2010.11.24 |
| 스크랩 (0) | 2010.06.22 |
| qna 탭 예제 (0) | 2010.06.22 |