컨텐츠 팝업 출력 소스

본 소스는 daum 에서 해당 내역만 추출 한 것입니다..

다음사이트를 보다가 유용 한것 같아서 추출 했습니다..^^;

사용에 대한 제재는 잘 모르겠네용....;;; 문제제기시 삭제 하겠습니당~

미리보기는 링크를 이용 해주세요^^

<style type="text/css">
<!--
#dashboard { display:none; position:absolute; background:transparent; width:309px; height:0%; margin:0 0 0 0; z-index:500; word-wrap:break-word; }
#resultarea { margin:0; padding:0; }

#dashboard #resultTop { height:10px; font-size:1px; line-height:1px; }
#dashboard #resultBot { height:10px; font-size:1px; line-height:1px; }

#dashboard div.lefttop #resultTop { background:url(http://pimg.hanmail.net/blog3/tip_left_1.gif) no-repeat; }
#dashboard div.lefttop #resultarea { background:url(http://pimg.hanmail.net/blog3/tip_left_2.gif) repeat-y; padding:0 8px 0 15px; }
#dashboard div.lefttop #resultBot { background:url(http://pimg.hanmail.net/blog3/tip_left_3.gif) no-repeat; }

#dashboard div.leftbot #resultTop { background:url(http://pimg.hanmail.net/blog3/tip_left_5.gif) no-repeat; }
#dashboard div.leftbot #resultarea { background:url(http://pimg.hanmail.net/blog3/tip_left_2.gif) repeat-y; padding:0 8px 0 15px; }
#dashboard div.leftbot #resultBot { background:url(http://pimg.hanmail.net/blog3/tip_left_4.gif) no-repeat; }

#dashboard div.righttop #resultTop { background:url(http://pimg.hanmail.net/blog3/tip_right_1.gif) no-repeat; }
#dashboard div.righttop #resultarea { background:url(http://pimg.hanmail.net/blog3/tip_right_2.gif) repeat-y; padding:0 15px 0 8px; }
#dashboard div.righttop #resultBot { background:url(http://pimg.hanmail.net/blog3/tip_right_3.gif) no-repeat; }

#dashboard div.rightbot #resultTop { background:url(http://pimg.hanmail.net/blog3/tip_right_5.gif) no-repeat; }
#dashboard div.rightbot #resultarea { background:url(http://pimg.hanmail.net/blog3/tip_right_2.gif) repeat-y; padding:0 15px 0 8px; }
#dashboard div.rightbot #resultBot { background:url(http://pimg.hanmail.net/blog3/tip_right_4.gif) no-repeat; }

#dashboard div.previewCotent { line-height:1.3; }
#dashboard div.previewCotent div.thumbArea { position:relative; float:right; margin:0 0 0 5px; }
#dashboard div.previewCotent div.dateArea { padding-top:4px; }
#dashboard div.previewCotent img.iconMovie { position:absolute; left:3px; top:60px; }
-->
</style>
<div id="dashboard" class=cont_text>
    <div id="resultBox" class="lefttop"><div id="resultTop"></div><div id="resultarea"></div><div id="resultBot"></div></div>
</div>
<Script language="JavaScript">
<!--
/* Layer Show/Hide */

function showPostLayer(oAnchor, sCntsId, event) {
    var oResultDiv = document.getElementById('resultarea');
    oResultDiv.innerHTML = (document.getElementById(sCntsId)? document.getElementById(sCntsId).innerHTML : "");
    
    if(oAnchor == null) return;
    var position = getPosition(oAnchor);
    var nAncX = position.x;
    var nAncY = position.y;
    var nAncWidth = oAnchor.offsetWidth;
    var nAncHeight = oAnchor.offsetHeight;

    var nDocX =  (document.documentElement.clientWidth || document.body.clientWidth);
    var nDocY = (document.documentElement.scrollHeight || document.body.scrollHeight);

    var oDashBoard = document.getElementById("dashboard");
    oDashBoard.style.display = "block";


    var nDashX = nAncX;
    var nDashY = nAncY;
    var nCntsHeight = oResultDiv.offsetHeight;
    var oResultBox = document.getElementById('resultBox');
    if(nAncX > nDocX/2) { //right
        nDashX -= 309 + 3;
        if(nAncY > nDocY - 200) { //예상 bot
            nDashY -= nCntsHeight + Math.ceil(nAncHeight/2);
            oResultBox.className = "rightbot";
        } else { //top
            nDashY += Math.ceil(nAncHeight/2);
            oResultBox.className = "righttop";
        }
    } else { //left
        nDashX += nAncWidth + 3;
        if(nAncY > nDocY - 200) { //예상 bot
            nDashY -= nCntsHeight + Math.ceil(nAncHeight/2);
            oResultBox.className = "leftbot";
        } else { //top
            nDashY += Math.ceil(nAncHeight/2);
            oResultBox.className = "lefttop";
        }
    }
    
    oDashBoard.style.left = (nDashX) + "px";
    oDashBoard.style.top = (nDashY) + "px";
}
    
function showDashBoard(){
    var obj = document.getElementById("dashboard");
    obj.style.display="block";
    viewLayer = true;
}

function hideDashBoard(){
    var obj = document.getElementById("dashboard");
    obj.style.display="none";
    viewLayer = false;
}

function getPosition(object) {
  var valueT = 0, valueL = 0;
    do {
      valueT += object.offsetTop  || 0;
      valueL += object.offsetLeft || 0;
      object = object.offsetParent;
      if (object) {
        if(object.tagName.toUpperCase()=='BODY') break;
      }
    } while (object);
    return {x: valueL, y:valueT};
}
-->
</Script>
<table width="250" align="center" border="1"><Tr><Td onclick="showPostLayer(this,'source_1',event)" onmouseout="hideDashBoard();">여기를 마우스로 클릭해 보세요^^</Td></tr></table>
<div id="source_1" style="display:none">
레이어 팝업 내용~^^
</div>