레이어로 만든 팝업입니다. 쿠키, 이동. 띄우는 시간 조절 가능

말자 전체게시물 작성일13-05-02 06:31 조회4,279회

본문

<script language="JavaScript">
<!--

var usePop = 1;        // 1이면 popUP 사용

var useMonth = 10;    // 공지창을 사용할 월 10은 10월임
var useDate  = 9;      // 공지창을 사용할 일 6은  6일까지임
var useTime  = 10;    // 공지창이 머무를 시간 10은 10초임
var expiredays = 1;    //공지창 하루 안띄우기 시간. 1은 하루임

var layerTop  = 10;    //상단에서 떨어진 위치를 잡으세요
var layerLeft = 10;    //죄측에서 떨어진 위치를 잡으세요
var layerWidth = 260;  //레이어 넓이
var layerHeight = 260; //레이어 높이

var layerTopBg = "#666666"; //상단,하단 바 배경
var layerPopBg = "#FFFFFF"; //내용 부분 배경

function startTime()
{
    var cName ="divPop";
    var time = new Date();
    var year = time.getFullYear();

    usedTime = new Date(year,parseInt(useMonth)-1,parseInt(useDate)+1);
    endTime = (usedTime.getTime()-time.getTime())/(24*60*60*1000);
    showTime = Math.ceil(endTime);

    if ( showTime < 0 || usePop != 1)
 {
        document.getElementById('divPop').style.visibility = "hidden";
 }
 else
 {
    cookieIndex = getCookie(cName);
        if ( !cookieIndex )
        {     
            document.getElementById('divPop').style.visibility = "visible";
        }
        else
        {
            document.getElementById('divPop').style.visibility = "hidden";
        }
 }

    document.getElementById('divPop').style.top = layerTop+"px";
    document.getElementById('divPop').style.left = layerLeft+"px";
    document.getElementById('divPop').style.width = layerWidth+"px";
    document.getElementById('popMain').style.height = layerHeight+"px";
    document.getElementById('popTop').style.background = layerTopBg;
    document.getElementById('divPop').style.background = layerPopBg;
    document.getElementById('popBottom').style.background = layerTopBg;

    h= time.getHours();
    m = time.getMinutes();
    s = time.getSeconds();

    closeTime = h*3600+m*60+s;
    closeTime += parseInt(useTime);

    setTimer();
}

function setTimer()
{
    var time = new Date();
 hour = time.getHours();
    min = time.getMinutes();
    sec = time.getSeconds();
    curTime = hour*3600+min*60+sec;

    if ( curTime >= closeTime )
 {
        document.getElementById('divPop').style.visibility = "hidden";
    }
 else
 {
        window.setTimeout("setTimer()",1000);
 }
}

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

function closeLayer()
{
    if ( document.notice_form.chkbox.checked )
 {
        setCookie("divPop", "os" , expiredays);
    }

    document.getElementById('divPop').style.visibility = "hidden";
}

isIE  = document.all;
isNN  = !document.all && document.getElementById;
isN4  = document.layers;

var max_zindex = 30;
function drag( mode,e,obj )
{
    if ( mode == 'start' )
 {
        obj.offsetx = isIE ? event.clientX : e.clientX;
        obj.offsety = isIE ? event.clientY : e.clientY;

        obj.nowX    = parseInt(obj.style.left);
        obj.nowY    = parseInt(obj.style.top);
        obj.dragable = '1';

        var new_zindex = max_zindex + 1;
        obj.style.zIndex = new_zindex;
        max_zindex = new_zindex;
    }
 else if ( mode == 'move' )
 {
        if ( obj.dragable == '1' )
  {
            var x = isIE ? (obj.nowX + event.clientX - obj.offsetx) : (obj.nowX + e.clientX - obj.offsetx);
            var y = isIE ? (obj.nowY + event.clientY - obj.offsety) : (obj.nowY + e.clientY - obj.offsety);
            var max_winw = document.body.clientWidth - parseInt(obj.style.width);
            var max_winh = document.body.clientHeight - parseInt(obj.style.height);

            if ( x >= 0 && x <=max_winw ) obj.style.left = x;
            if ( y >= 0 && y <=max_winh ) obj.style.top  = y;
        }
    }
 else if ( mode == 'stop' )
 {
        obj.dragable='0'
    }
}
//-->
</script>
</head>

<STYLE type="text/css">
#divPop { position:absolute; border:2px #999999 solid; z-index:999; visibility:visible;
    cursor:move; filter:alpha(Opacity:80,style:0));-moz-opacity:.50;opacity:.50;
}

#divPop #popTop { height: 30px; }
#divPop #popMain { height:270px; }
#divPop #popBottom { height: 40px; }

.topContent { position:relative; top:5px; margin:0 0 0 5px; font-weight:bold; font-size:12px; color:#ffffff; }
.mainContent { margin:5px 0 0 5px; font-weight:normal; font-size:12px; color:#666666; }
.bottomContent { position:relative; top:5px; margin:0 0 2px 0; font-weight:bold; font-size:12px; color:#ffffff; cursor:pointer; text-align:center }
</STYLE>

<body onLoad="startTime();">

<form name="notice_form">
<div id="divPop" style="position:absolute;left:0px;top:0px;z-index:1;width:0px;height:0px;" onSelectStart="return false;" onMouseDown="drag('start',event,this);" onMouseUp="drag('stop',event,this);" onMouseMove="drag('move',event,this);" dragable='0'>
    <div id="popTop">
        <div class="topContent">공지&nbsp;<span id="today" style="font-weight:normal; color:#ff8000"></span></div>
 </div>
    <div id="popMain">
        <div class="mainContent">
        <p>서원영 개인전</p>
        <p>Memorandum of an Interstellar Surveyor </p>
        <p> (어느 성간측량기사의 비망록) </p>
        <p>&nbsp;</p>
        <p> 장 소: 모란갤러리 종로구 관훈동 백상빌딩 B1<br>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 02-737-0000
        </p>
        <p>기 간: 2007. 10. 17(Wed)-10. 23(Tue) </p>
        <p>초대일시: 2007. 10. 17(Wed) pm 6:0</p>
      </div>
 </div>
    <div id="popBottom">
        <div class="bottomContent"> <span style="font-weight:normal">이 창은</span><span id="stayTime" style="color:#ff8000"></span>초후에
        자동으로 닫힙니다.</span><br>
        <input type="checkbox" name="chkbox" onclick="closeLayer();">
        오늘 하루 이 창을 열지 않음<a href="javascript:closeLayer();"> [닫기]</a> </div>
 </div>
</div>
</form>

<script language="Javascript">
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 "";
}

function cal()
{
    var t  = new Date();
    var y  = t.getFullYear();
    var m  = t.getMonth();
    var d  = t.getDate();
    var dw  = t.getDay(); 
    var w;

 switch ( dw )
 {
    case 0: w = " (日요일)"; break;
    case 1: w = " (月요일)"; break;
    case 2: w = " (火요일)"; break;
    case 3: w = " (水요일)"; break;
    case 4: w = " (木요일)"; break;
    case 5: w = " (金요일)"; break;
    case 6: w = " (土요일)"; break;
    }

    document.getElementById('today').innerHTML = ""+y+ "년 " + (m+1) + "월 " + d + "일"+w;
}

cal();

document.getElementById('stayTime').innerHTML = useTime;
</script>
 

비회원도 추천 가능합니다.
유익한 정보였다면, 추천해주세요

추천 4 비추천 0

자바스크립트

31개의 게시물
목록
읽기: 1P (1lv), 쓰기: 100P (3lv), 덧글: 10P (2lv), 다운: -10P (2lv)
자바스크립트 목록
번호 제목 아이디 날짜 조회수 추천
31 symbol: method printIn(String), location: variab… 최고관리자 전체게시물 12-06 3339 추천: 4
30 Java JDK 1.8 설치 방법 및 환경변수 설정 관련링크 최고관리자 전체게시물 12-06 4078 추천: 3
29 레이어팝업에 jwplayer 자바스크립트로 동영상 재생시 닫기 버튼 눌르면, 레이어는 닫혀… 댓글1 인기글첨부파일 말자아이콘 전체게시물 10-27 8471 추천: 4
28 닫기버튼이 있는 레이어팝업 인기글첨부파일 말자아이콘 전체게시물 10-26 6107 추천: 3
27 롤오버 메뉴 스크립소스 말자 전체게시물 05-02 3748 추천: 4
열람 레이어로 만든 팝업입니다. 쿠키, 이동. 띄우는 시간 조절 가능 말자 전체게시물 05-02 4280 추천: 4
25 타이틀 링크 클릭하면, 목록이 부드럽게 펼쳐지는 메뉴 말자 전체게시물 05-02 4861 추천: 3
24 즐겨찾기 소스 말자 전체게시물 05-02 3818 추천: 3
23 링크 일괄 적용 시키기 말자 전체게시물 05-02 3516 추천: 4
22 페이지 접속시 다른페이지로 강제로 이동시키기 무료아이콘 전체게시물 05-02 3328 추천: 3
21 글자를 클릭하면, 내용 자동 복사되게 하기 ctrl+c기능 말자 전체게시물 05-02 3255 추천: 3
20 글자 깜빡이게 하기 말자 전체게시물 05-02 3710 추천: 3
19 한 문장씩 노출되게 하기 말자 전체게시물 05-02 3280 추천: 3
18 alert 팝업창 띄우기 말자 전체게시물 05-02 3814 추천: 2
17 스크롤링 배너 첨부파일 말자 전체게시물 05-02 3444 추천: 2
게시물 검색