레이어팝업
<!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>
<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>
<body>
<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>
</html>
첨부파일
|
댓글 작성
댓글을 작성하시려면 로그인이 필요합니다.
로그인하기
댓글 8개