레이어 팝업 예제
레이어 팝업은 어떻게 사용하느냐에 따라서 웹페이지가 깔끔해질수도 있고
오히려 페이지를 망칠수 있습니다.
웹디자인적인 측면을 충분히 고려후 사용하시는 걸 권합니다.
<html>
<head>
<title>팝업레이어</title>
<script type="text/javascript">
<!--
function move_box(an, box) {
//링크된 위치에서 부터의 설정값 지정
var cleft = 20; //왼쪽마진
var ctop = -10; //상단마진
var obj = an;
while (obj.offsetParent) {
cleft += obj.offsetLeft;
ctop += obj.offsetTop;
obj = obj.offsetParent;
}
box.style.left = cleft + 'px';
ctop += an.offsetHeight + 8;
if (document.body.currentStyle &&
document.body.currentStyle['marginTop']) {
ctop += parseInt(
document.body.currentStyle['marginTop']);
}
box.style.top = ctop + 'px';
}
function show_hide_box(an, width, height, borderStyle) {
var href = an.href;
var boxdiv = document.getElementById(href); if (boxdiv != null) {
if (boxdiv.style.display=='none') {
move_box(an, boxdiv);
boxdiv.style.display='block';
} else
boxdiv.style.display='none';
return false;
} boxdiv = document.createElement('div');
boxdiv.setAttribute('id', href);
boxdiv.style.display = 'block';
boxdiv.style.position = 'absolute';
boxdiv.style.width = width + 'px';
boxdiv.style.height = height + 'px';
boxdiv.style.border = borderStyle;
boxdiv.style.backgroundColor = '#fff'; var contents = document.createElement('iframe');
contents.scrolling = 'no';
contents.frameBorder = '0';
contents.style.width = width + 'px';
contents.style.height = height + 'px';
contents.src = href; boxdiv.appendChild(contents);
document.body.appendChild(boxdiv);
move_box(an, boxdiv); return false;
}
</script>
</head>
<body>
레이어 팝업창 안에 HTML파일 및 외부사이트를 보여줄 수 있습니다.<p>
<a href="http://naver.com" onClick="return show_hide_box(this,440,300,'1px solid')">여기를 클릭하세요..</a>
</body>
</html>