첫째. 반투명 그림자 효과

filter:alpha(opacity=50); -moz-opacity:.50; opacity:.50;
filter는 IE전용이고 FF를 고려하여 opacity 속성값을 지정한다.

둘째. 레이어 마우스 드래그
포띠고 차띠고 레이어 마우스 드래그 동작을 하기 위한 핵심적인 스크립트만 살펴보자.

일단, 브라우저 체크를 한다.

PopupLayer라는 ID값을 가진 레이어의 기본 위치를 잡아준다.

PopupLayerMove(50,100); // 팝업 기본 위치

function PopupLayerMove(div_left,div_top){ // 레이어 이동
    document.getElementById("PopupLayer").style.left = div_left ;
    document.getElementById("PopupLayer").style.top = div_top ;
}

마우스 다운시 함수와 마우스 이동시 함수만 적절히 사용하면 되는 것이다.

document.getElementById("PopupLayer").onmousedown=PopMove2;
document.getElementById("PopupLayer").onmouseup=Function("MoveEnabled=false");

function PopMove2(e){
    offsetx=isIE ? event.clientX : e.clientX;
    offsety=isIE ? event.clientY : e.clientY;
    nowX=parseInt(document.getElementById("PopupLayer").style.left);
    nowY=parseInt(document.getElementById("PopupLayer").style.top);
    oldx = isIE ? event.clientX-nowX : e.clientX-nowX
    oldy = isIE ? event.clientY-nowY : e.clientY-nowY
    MoveEnabled=true;

    document.onmousemove=PopMove;
}

function PopMove(e){
    if (!MoveEnabled) return; 

    document.getElementById("PopupLayer").style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
    document.getElementById("PopupLayer").style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
    return false;
}

<문제점 보완>

하지만, xhtml로 코딩시엔 FF에서 작동하지 않는다.

이유는 X, Y축 설정 과정(style.left)에서 "px" 단위가 빠졌기 때문이다.

레이어 이동 관련하여 xhtml 기준 샘플파일을 첨부한다.

이 기본 동작을 응용하면 좀 더 다이렉티브한 기능을 처리 할 수 있다.

그리고 레이어를 화면에서 넘어가게 우측이나 아래로 이동시키면 무한 스크롤이 생기는 문제가 있다.

이 문제를 해결하기 위해 최소한의 예외처리는 하나 정도 있으면 좋을꺼란 생각이 든다.

예를 들면, 아래 소스와 같이 지정한 범위를 넘어가지 못하게 하는 방법이 있다.

function PopMove(e){
    if (!MoveEnabled) return;

    limitX = document.body.clientWidth - 500; // 500은 레이어 크기를 감안해서 빼줌
    limitY = document.body.clientHeight;
    if (isIE){
        if (limitX < nowX+event.clientX-offsetx || limitY < nowY+event.clientY-offsety) return;
    } else {
        if (limitX < nowX+e.clientX-offsetx || limitY < nowY+e.clientY-offsety) return;
    }

    document.getElementById("PopupLayer").style.left=isIE ? nowX+event.clientX-offsetx : nowX+e.clientX-offsetx;
    document.getElementById("PopupLayer").style.top=isIE ? nowY+event.clientY-offsety : nowY+e.clientY-offsety;
    return false;
}