아이디/비번 기억
  • 봉하마을 방문후기
  • 미디어협동조합 국민TV국민TV의 조합원이 되어주세요!
  • 한국탐사저널리즘센터
현재위치 : HOME > 구구자료실

움직이는팝업창

구구 | 2012.06.13 11:25 | 조회 5362
<style type="text/css">
#poplayer_No { position:absolute; font-family:굴림; font-size:11px; border:1px solid #666; width:330px; VISIBILITY: hidden;}
.notice { left:170px; top:170px; height:22px; color:#ffffff; font-weight:bold; background-color:orange; padding:5px; width:320px; cursor:move;}
.contents { clear:both; width:320px; height:280px; padding:5px;}
.winClose { width:50px; height:16px; background-color:#cccccc; padding:5px 5px 0px 5px; font-weight:bold; cursor:pointer;}
</style>

<script language="javascript">
window.onload = function() {
    with(document) {
        getElementById("layer_move").onmousedown = function() { onMove_layer(1); }
        getElementById("htmlMove").onmousemove = getMove;
        getElementById("htmlMove").onmouseup = function() { onMove_layer(0); };    
        getElementById("notNote").onclick = function() { noticeClose('poplayer_No',1); };        
        getElementById("winClose").onclick = closeWin;
    }
}

//---------------------------------------------Layer Move---------------------------------------------------------//

var move_on, x_styleLeft, y_styleTop, x_accept, y_accept;
move_num = 0;

function onMove_layer(chk) {
    var val = document.getElementById("poplayer_No");
    if (chk ==1) {
        x_styleLeft = event.clientX - val.offsetLeft;
        y_styleTop = event.clientY - val.offsetTop;
    }
    move_num = chk;
}

function getMove() {
    var val = document.getElementById("poplayer_No")
    if (move_num == 1) {
        x_accept = event.clientX - x_styleLeft;
        y_accept = event.clientY - y_styleTop;
        if (x_accept > 1) { val.style.left = x_accept }
        if (y_accept > 1) { val.style.top = y_accept }
    }
}

//-------------------------------------------------PopCookies-----------------------------------------------------------------//

//팝업을 그만 띄운다.
function SetNoticeCookie(name, day) {
    var ExpDate = new Date();
    ExpDate.setDate(ExpDate.getDate() + day);
    document.cookie = name + "=" + escape("No") + "; path=; expires=" + ExpDate.toGMTString() + ";" 
}

//팝업창을 띄우기전 사용자의 쿠키를 체크
function getNoticeCookie(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 id="htmlMove">

<div id="poplayer_No" name="poplayer_No">
    <div class="notice" id="layer_move">팝업레이어 입니다.</div>
    <div class="contents">익스플로러 와 오페라, 크롬에서는 잘되네요 파이어폭스에서는 이동이 안되요</div>
    <div style="text-align:bottom">
        <div style="text-align:right">
            <input type="checkbox" id="notNote">오늘 하루 뛰우지 않음<span class="winClose" id="winClose">닫기X</span>
        </div>
    </div>
</div>
<script language="javascript">
function noticeShow(divid){
    var divObj = document.getElementById(divid);
    divObj.style.visibility = "visible";
}

function noticeHide(divid) {
    var divObj = document.getElementById(divid);
    divObj.style.visibility = "hidden";

function noticeClose(divid, closday)
{
    noticeHide(divid);
    SetNoticeCookie(divid, closday);
}

function closeWin() { 
document.getElementById('poplayer_No').style.visibility = "hidden";
}  

if (getNoticeCookie('poplayer_No') != "No") {
     noticeShow('poplayer_No'); 
}
</script>

</body> 

twitter facebook me2day 요즘
98개(4/5페이지)
소스자료실
번호 제목 글쓴이 조회 날짜
38 [jquery] 구글검색엔진으로 내홈페이지를 검색! 사진 첨부파일 구구 4284 2012.06.13 16:13
37 [jquery] 슬라이더로 구성한 홈페이지 샘플 사진 첨부파일 구구 4399 2012.06.13 15:57
36 [jquery] 메인이미지 버튼/시간/효과 사진 첨부파일 구구 5186 2012.06.13 15:52
35 [jquery] 하단으로 열리는 메뉴 기본 사진 첨부파일 구구 6375 2012.06.13 15:49
34 [html/css] 이미지없는 CSS버튼 사용해보자! 사진 첨부파일 구구 8628 2012.06.13 15:20
33 [Java] 마우스 스크롤을 좌우스크롤로 활용! 사진 첨부파일 구구 5499 2012.06.13 15:12
32 [모바일] 베너클릭시 슬라이드되는 내용들 사진 첨부파일 구구 6547 2012.06.13 15:04
31 [Java] 갤러리/앨범 스타일04 사진 첨부파일 구구 4484 2012.06.13 15:00
30 [Java] 갤러리/앨범 스타일03 사진 첨부파일 구구 5102 2012.06.13 14:50
29 [Java] 갤러리/앨범 스타일02 사진 첨부파일 구구 4238 2012.06.13 14:47
28 [Java] 클릭시 나오는 공간 (사이트맵정도로 사용) 사진 첨부파일 구구 4833 2012.06.13 14:35
27 [Java] 메인비쥬얼 효과 사진 첨부파일 구구 4412 2012.06.13 14:27
26 [Java] 롤오버베너 사진 첨부파일 구구 5129 2012.06.13 14:06
25 [Java] 네이트 베너 (랜덤으로 나오는 베너) 사진 첨부파일 구구 4648 2012.06.13 13:59
24 [Java] 부드럽게 내려오는 네비게이션 메뉴 첨부파일 구구 6355 2012.06.13 13:46
23 [html/css] 말풍선 툴팁 (모든브라우져 사용가능) 구구 14936 2012.06.13 12:58
>> [etc] 움직이는팝업창 구구 5363 2012.06.13 11:25
21 [etc] 원하는위치 원하는크기로 새창띄우기 구구 10248 2012.06.13 11:01
20 [Java] 갤러리/앨범 스타일01 깔끔한앨범 - 보기쉬운UI 첨부파일 관리자 6115 2012.06.12 18:57
19 [jquery] 반응형웹디자인 (미디어쿼리 / media query) 첨부파일 관리자 6150 2012.06.12 18:51