레이어공지팝업입니다. 하단의 <div> 테이블 안에 들어있는 table을 수정하시면 레이어팝업창을 수정하실수 있습니다.
아래는 본 예제의 스크립트입니다.
<html>
<head>
<title>해피CGI</title>
<script language="javascript">
<!--
var isCSS,isW3C,isIE4,isNN4,isIE6CSS;
function centerOnWindow(elemID){
var obj = getRawObject(elemID);
var scrollX=0,scrollY=0;
if(document.body && typeof document.body.scrollTop !="undefined"){
scrollX+=document.body.scrollLeft;
scrollY+=document.body.scrollTop;
if(document.body.parentNode && typeof document.body.parentNode.scrollTop !="undefined"){
scrollX+=document.body.parentNode.scrollLeft;
scrollY+=document.body.parentNode.scrollTop;
}
}
else if(typeof window.pageXOffset !="undefined"){
scrollX+=window.pageXOffset;
scrollY+=window.pageYOffset;
}
//alert(getObjectWidth(obj)/2);
var x = Math.round((getInsideWindowWidth()/2) - (getObjectWidth(obj)/2)) + scrollX;
var y = Math.round((getInsideWindowHeight()/2) - (getObjectHeight(obj)/2)) + scrollY;
//alert(x + "=" + y);
shiftTo(obj,x,y);
}
function getInsideWindowWidth(){
if(window.innerWidth){
return window.innerWidth;
}
else if(isIE6CSS){
return document.body.parentElement.clientWidth;
}
else if(document.body && document.body.clientWidth){
return document.body.clientWidth;
}
}
function shiftTo(obj,x,y){
if(obj){
if(isCSS){
//alert("in");
var units = (typeof obj.left == "string") ? "px" : 0;
obj.style.left = x + units;
obj.style.top = y + units;
obj.style.visibility="visible";
}
else if(isNN4){
obj.moveTo(x,y);
}
}
}
function handleScroll(evt){
evt = (evt) ? evt : window.event;
centerOnWindow("mypopup");
evt.cancelBubble = true;
}
window.onscroll = handleScroll;
window.onresize = handleScroll;
function getInsideWindowHeight(){
if(window.innerHeight){
return window.innerHeight;
}
else if(isIE6CSS){
return document.body.parentElement.clientHeight;
}
else if(document.body && document.body.clientHeight){
return document.body.clientHeight;
}
}
function getObjectWidth(elem){
var result = 0;
if(elem){
if(elem.offsetWidth){
result = elem.offsetWidth;
}
else if(elem.clip && elem.clip.width){
result = elem.clip.width;
}
else if(elem.style && elem.style.pixelWidth){
result = elem.style.pixelWidth;
}
}
return parseInt(result);
}
function getObjectHeight(elem){
var result = 0;
if(elem){
if(elem.offsetHeight){
result = elem.offsetHeight;
}
else if(elem.clip && elem.clip.height){
result = elem.clip.height;
}
else if(elem.style && elem.style.pixelHeight){
result = elem.style.pixelHeight;
}
}
return parseInt(result);
}
function swapcolor(){
if(document.images){
isCSS = (document.body && document.body.style) ? true : false;
isW3C = (isCSS && document.getElementById) ? true : false;
isIE4 = (isCSS && document.all) ? true : false;
isNN4 = (document.layers) ? true : false;
isIE6CSS = (document.compatMode && document.compatMode.indexOf("CSS1")>=0) ? true : false;
}
centerOnWindow("mypopup");
opacity("mypopup",0,100,2000);
}
function getRawObject(obj){
var theObj;
if(typeof obj == "string"){
if(isW3C){
theObj = document.getElementById(obj);
}
else if(isIE4){
theObj = document.all(obj);
}
else if(isNN4){
theObj = seekLayer(document,obj);
}
}
return theObj;
}
function getObject(obj){
var theObj = getRawObject(obj);
if(theObj && isCSS){
theObj = theObj.style;
}
return theObj;
}
function seekLayer(doc, name){
var theObj;
for(var i=0;i < doc.layers.length ; i++){
if(doc.layers[i].name == name){
theObj = doc.layers[i];
break;
}
if(doc.layers[i].document.layers.length > 0){
theObj = seekLayer(document.layers[i].document, name);
}
}
return theObj;
}
function opacity(id, opacStart, opacEnd, millisec) {
//speed for each frame
var speed = Math.round(millisec / 100);
var timer = 0;
//determine the direction for the blending, if start and end are the same nothing happens
if(opacStart > opacEnd) {
for(i = opacStart; i >= opacEnd; i--) {
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
} else if(opacStart < opacEnd) {
for(i = opacStart; i <= opacEnd; i++)
{
setTimeout("changeOpac(" + i + ",'" + id + "')",(timer * speed));
timer++;
}
}
}
//change the opacity for different browsers
function changeOpac(opacity, id) {
var object = document.getElementById(id).style;
object.opacity = (opacity / 100);
object.MozOpacity = (opacity / 100);
object.KhtmlOpacity = (opacity / 100);
object.filter = "alpha(opacity=" + opacity + ")";
}
//-->
</script>
</HEAD>
<BODY onload="swapcolor()">
하단으로 스크롤해도 중앙에 레이어 공지창이 그자리를 유지합니다.
<div style="position:absolute;top:0px;left:0px;visibility:hidden;filter: alpha(opacity=0);-moz-opacity:25;opacity:.00;" id="mypopup">
<table width=400 height=400>
<tr bgcolor=white><td style="border:1px #999999 solid">공지사항내용입니다. 이곳에다 글을적어 레이어팝업을 띄워봅시다.</td></tr>
<tr bgcolor=white align=right height=20><td style="border:1px #999999 solid"><a href=# onclick="document.getElementById('mypopup').style.display='none'">Close</a></td></tr>
</table>
</div>
</BODY>
</HTML>
|
