마스터포유(Master4U)
Monday, 17 of January
 

로그인
[스크랩] 드래그 가능한 다중 레이어 팝업창 띄우기
관리자  2020-09-25 22:19:53 Hit:197
링크 #1: http://blog.daum.net/knight7667/4


http://blog.daum.net/knight7667/4

다중 레이어 팝업창을 띄우고 드래그를 할 수 있는 자바스크립트 소스를 찾다가 못찾아서
한번 만들어 봤습니다.

<html>
<head>
<title> New Document </title>
<script language="JavaScript1.2">
isIE=document.all;
isNN=!document.all&&document.getElementById;
isN4=document.layers;
isHot=false;
function ddInit(e){
  topDog=isIE ? "BODY" : "HTML";
  hotDog=isIE ? event.srcElement : e.target;
  idx=hotDog.id.substr(hotDog.id.length-1,1);
  whichDog=isIE ? eval!("document.all.divpop" + idx) : document.getElementById("divpop" + idx);
  while (hotDog.id!=hotDog.id&&hotDog.tagName!=topDog){
    hotDog=isIE ? hotDog.parentElement : hotDog.parentNode;
  }
  if (hotDog.id){
    offsetx=isIE ? event.clientX : e.clientX;
    offsety=isIE ? event.clientY : e.clientY;
    nowX=parseInt(whichDog.style.left);
    nowY=parseInt(whichDog.style.top);
    ddEnabled=true;
    document.onmousemove=dd;
  }
}
function dd(e){
  if (!ddEnabled) return;
  whichDog.style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
  whichDog.style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
  return false;
}
function ddN4(whatDog){
  if (!isN4) return;
  N4=eval!(whatDog);
  N4.captureEvents(Event.MOUSEDOWN|Event.MOUSEUP);
  N4.onmousedown=function(e){
    N4.captureEvents(Event.MOUSEMOVE);
    N4x=e.x;
    N4y=e.y;
  }
  N4.onmousemove=function(e){
    if (isHot){
      N4.moveBy(e.x-N4x,e.y-N4y);
      return false;
    }
  }
  N4.onmouseup=function(){
    N4.releaseEvents(Event.MOUSEMOVE);
  }
}
function hideMe(id){
  if ( document.getElementById('chkbox'+id).checked ) {
    setCookie( "mainPop"+id, "done" , 1 );
document.getElementById('chkbox'+id).checked = false;
  }
  if (isIE||isNN) document.getElementById('divpop'+id).style.visibility="hidden";
  else if (isN4) document.divpop.visibility="hide";
}
function setCookie( name, value, expiredays ) {
  var todayDate = new Date();
  todayDate.setDate( todayDate.getDate() + expiredays );
  document.cookie! = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}
document.onmousedown=ddInit;
document.onmouseup=Function("ddEnabled=false");
</script>
<style type="text/css">
<!--
td {
  font-family: Tahoma, 돋움, Dotum, sans-serif;
  font-size: 11px;
  line-height: 145%;
  color: #000000;
}
-->
</style>
</head>
<body>
<div id="divpop0" style="position:absolute;width:450px;left:100;top:100;visibility:hidden;z-index:1">
<table border="0" width="450" bgcolor="#0084FF" cellspacing="0" cellpadding="5">
<tr>
    <td width="100%">
        <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
        <tr>
            <td id="titleBar0" style="cursor:move" width="100%">
            <ilayer width="100%" onSelectStart="return false">
            <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(divpop0)" onMouseout="isHot=false">
            <font face="Arial" color="#FFFFFF">메세지 0</font>
            </layer>
            </ilayer>
            </td>
            <td style="cursor:hand" valign="top">
            <a href="#" onClick="hideMe(0);return false"><font color=#ffffff size=2 face=arial  style="text-decoration:none">X</font></a>
            </td>
        </tr>
        <tr>
            <td width="100%" bgcolor="#FFFFFF" style="padding:14px" colspan="2">
            마음보자기 레이어 팝업창 입니다.<br>
            이곳에 공지 또는 광고 내용을 입력하세요..<br>
            팝업창은 무한대로 열수있고<br>
            특정 팝업창만 드래고, 닫기, 오늘 하루 안열기가 됩니다. *^^*
            </td>
        </tr>
  <tr>
         <td align="right" bgcolor="#EFEFEF" width="100%" height="25" colspan="2" style="padding:5px"><input type="checkbox" name="chkbox0" id="chkbox0" value="checkbox" onfocus="this.blur();" onclick="hideMe(0);"> 하루 동안 이 창을 열지 않습니다. </td>
      </tr>
        </table>
    </td>
</tr>
</table>
</div>
<div id="divpop1" style="position:absolute;width:450px;left:130;top:130;visibility:hidden;z-index:2">
<table border="0" width="450" bgcolor="#0084FF" cellspacing="0" cellpadding="5">
<tr>
    <td width="100%">
        <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
        <tr>
            <td id="titleBar1" style="cursor:move" width="100%">
            <ilayer width="100%" onSelectStart="return false">
            <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(divpop1)" onMouseout="isHot=false">
            <font face="Arial" color="#FFFFFF">메세지 1</font>
            </layer>
            </ilayer>
            </td>
            <td style="cursor:hand" valign="top">
            <a href="#" onClick="hideMe(1);return false"><font color=#ffffff size=2 face=arial  style="text-decoration:none">X</font></a>
            </td>
        </tr>
        <tr>
            <td width="100%" bgcolor="#FFFFFF" style="padding:14px" colspan="2">
            마음보자기 레이어 팝업창 입니다.<br>
            이곳에 공지 또는 광고 내용을 입력하세요..<br>
            팝업창은 무한대로 열수있고<br>
            특정 팝업창만 드래고, 닫기, 오늘 하루 안열기가 됩니다. *^^*
            </td>
        </tr>
  <tr>
         <td align="right" bgcolor="#EFEFEF" width="100%" height="25" colspan="2" style="padding:5px"><input type="checkbox" name="chkbox1" id="chkbox1" value="checkbox" onfocus="this.blur();" onclick="hideMe(1);"> 하루 동안 이 창을 열지 않습니다. </td>
      </tr>
        </table>
    </td>
</tr>
</table>
</div>
<div id="divpop2" style="position:absolute;width:450px;left:160;top:160;visibility:hidden;z-index:3">
<table border="0" width="450" bgcolor="#0084FF" cellspacing="0" cellpadding="5">
<tr>
    <td width="100%">
        <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36">
        <tr>
            <td id="titleBar2" style="cursor:move" width="100%">
            <ilayer width="100%" onSelectStart="return false">
            <layer width="100%" onMouseover="isHot=true;if (isN4) ddN4(divpop2)" onMouseout="isHot=false">
            <font face="Arial" color="#FFFFFF">메세지 2</font>
            </layer>
            </ilayer>
            </td>
            <td style="cursor:hand" valign="top">
            <a href="#" onClick="hideMe(2);return false"><font color=#ffffff size=2 face=arial  style="text-decoration:none">X</font></a>
            </td>
        </tr>
        <tr>
            <td width="100%" bgcolor="#FFFFFF" style="padding:14px" colspan="2">
            마음보자기 레이어 팝업창 입니다.<br>
            이곳에 공지 또는 광고 내용을 입력하세요..<br>
            팝업창은 무한대로 열수있고<br>
            특정 팝업창만 드래고, 닫기, 오늘 하루 안열기가 됩니다. *^^*
            </td>
        </tr>
  <tr>
         <td align="right" bgcolor="#EFEFEF" width="100%" height="25" colspan="2" style="padding:5px"><input type="checkbox" name="chkbox2" id="chkbox2" value="checkbox" onfocus="this.blur();" onclick="hideMe(2);"> 하루 동안 이 창을 열지 않습니다. </td>
      </tr>
        </table>
    </td>
</tr>
</table>
</div>
<script language="JavaScript">
<!--
cookiedata = document.cookie!
for (i=0;i<3;i++){
if ( cookiedata.indexOf("mainPop"+i+"=done") < 0 ) {
   document.all['divpop'+i].style.visibility = "visible";
}
else {
document.all['divpop'+i].style.visibility = "hidden";
}
}
//-->
</script>
</body>
</html>
본문인쇄본문메일발송
HTML href 파란 줄 없애기
Copyright 1999-2021 Zeroboard / skin by ChanBi