IT Story/Coding | 2009/06/24 10:21 | Smile^0^

[출처] 네이버 지식in mook7236



요즘은 팝업으로 띄우면 팝업차단으로 다 걸리기 때문에 잘 사용안하고 있습니다..

팝업으로 띄우는 것 말고 노프래임에서 레이어로 띄우는 방법을 알려 드리겠습니다.


head안에 넣을 소스

<script type="text/javascript">


var ns4=document.layers
var ie4=document.all
var ns6=document.getElementById&&!document.all

var dragswitch=0
var nsx
var nsy
var nstemp

function drag_dropns(name){
if (!ns4)
return
temp=eval(name)
temp.captureEvents(Event.MOUSEDOWN | Event.MOUSEUP)
temp.onmousedown=gons
temp.onmousemove=dragns
temp.onmouseup=stopns
}

function gons(e){
temp.captureEvents(Event.MOUSEMOVE)
nsx=e.x
nsy=e.y
}
function dragns(e){
if (dragswitch==1){
temp.moveBy(e.x-nsx,e.y-nsy)
return false
}
}

function stopns(){
temp.releaseEvents(Event.MOUSEMOVE)
}

function drag_drop(e){
if (ie4&&dragapproved){
crossobj.style.left=tempx+event.clientX-offsetx
crossobj.style.top=tempy+event.clientY-offsety
return false
}
else if (ns6&&dragapproved){
crossobj.style.left=tempx+e.clientX-offsetx+"px"
crossobj.style.top=tempy+e.clientY-offsety+"px"
return false
}
}

function initializedrag(e){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
var firedobj=ns6? e.target : event.srcElement
var topelement=ns6? "html" : document.compatMode && document.compatMode!="BackCompat"? "documentElement" : "body"
while (firedobj.tagName!=topelement.toUpperCase() && firedobj.id!="dragbar"){
firedobj=ns6? firedobj.parentNode : firedobj.parentElement
}

if (firedobj.id=="dragbar"){
offsetx=ie4? event.clientX : e.clientX
offsety=ie4? event.clientY : e.clientY

tempx=parseInt(crossobj.style.left)
tempy=parseInt(crossobj.style.top)

dragapproved=true
document.onmousemove=drag_drop
}
}
document.onmouseup=new Function("dragapproved=false")

function hidebox(){
crossobj=ns6? document.getElementById("showimage") : document.all.showimage
if (ie4||ns6)
crossobj.style.visibility="hidden"
else if (ns4)
document.showimage.visibility="hide"
}


function change(form)
{
if (form.url.selectedIndex !=0)
parent.location = form.url.options[form.url.selectedIndex].value
}

function setCookie( name, value, expiredays )
{
        var todayDate = new Date();
        todayDate.setDate( todayDate.getDate() + expiredays );
        document.cookie = name + "=" + escape( value ) + "; path=/; expires=" + todayDate.toGMTString() + ";"
}

function getCookie( name )
{
        var nameOfCookie = name + "=";
        var x = 0;
        while ( x <= document.cookie.length )
        {
                var y = (x+nameOfCookie.length);
                if ( document.cookie.substring( x, y ) == nameOfCookie ) {
                        if ( (endOfCookie=document.cookie.indexOf( ";", y )) == -1 )
                                endOfCookie = document.cookie.length;
                        return unescape( document.cookie.substring( y, endOfCookie ) );
                }
                x = document.cookie.indexOf( " ", x ) + 1;
                if ( x == 0 )
                        break;
        }
        return "";
}

</script>







body안에 넣을 소스

<div id="showimage" style="z-index:99;position:absolute;width:350px;left:50px;top:20px;">
<SCRIPT language="JavaScript">
<!--

function closeWin()
{
        if ( document.forms[0].Notice.checked ) {
                setCookie( "Notice", "done" , 1); //1이란 숫자는 1일간 안보임을 뜻합니다. 날짜는 자신에 맞게 수정하세요
                }

}

if ( getCookie( "Notice" ) == "done" ) {
    hidebox();
}
// -->
</SCRIPT>
<!--  위 태그에서 위치를 지정해 줄 수 있습니다  --->
<form>
<table border="0" width="350" bgcolor="#FF6347" cellspacing="0" cellpadding="0" style="border:solid 1px #000000;">
  <tr>
    <td width="100%" align="center">

        <table border="0" width="100%" cellspacing="0" cellpadding="0" height="36px">
            <col width="*"></col><col width="120"></col>
        <tr>
          <td align="left" height="31" id="dragbar" style="cursor:hand; cursor:pointer;padding-left:10px;" onMousedown="initializedrag(event)"><layer width="100%" onSelectStart="return false"><layer  width="100%" onMouseover="dragswitch=1;if (ns4) drag_dropns(showimage)" onMouseout="dragswitch=0"><font face="굴림" color="#FFFFFF"><strong>팝업의 제목을 쓰시면 됩니다.</strong></font></layer></ilayer></td>
          <td align="center" valign="middle" style="cursor:hand;" nowrap><input type="checkbox" name="Notice" value=""><font color="#FFFFFF">오늘은 그만보기</font> <a href="#"  onClick="closeWin();hidebox();return false;"><font color="#FFFFFF"><b>[닫기]</b></font></a></td>
        </tr>
        <tr>
          <td width="100%" bgcolor="#FFFFFF" colspan="2"><a href="팝업클릭후 이동할페이지 절대경로"><img src="팝업으로띄울이미지.jpg" width="350" height="500" border="0"></a></td>
        </tr>
      </table>

    </td>
  </tr>
</table>
      </form>


</div>


width="350" height="500"은 당연히 팝업의 이미지 크기와 같게 하셔야 겠죠...

크리에이티브 커먼즈 라이센스
Creative Commons License



2009/06/24 10:21 2009/06/24 10:21

Trackback address :: http://www.smilestory.net/trackback/104

Comments List

Write a comment.