Knowledge Base/교육

[자바스크립트] 팝업창 원하는 방식, 원하는 위치로 띄우기

Woos™ 2010. 9. 19. 09:35

출처 : http://www.designblack.com/bbs/board.php?bo_table=tip&wr_id=75

먼저 js 파일을 아래처럼 만듭니다.

// 팝업창 정의

function popupWinWithNoScroll(sUrl, nWidth, nHeight)  // 스크롤 없는 팝업창
{
nLeft = (window.screen.width - nWidth ) / 2;
nTop  = (window.screen.height- nHeight) / 2;
sF  = "";
sF += "toolbar=no,location=no,menubar=no,status=no,directories=no,resizable=no,scrollbars=yes";
sF += ",left=" + nLeft;
sF += ",top=" + nTop;
sF += ",width=" +  nWidth;
sF += ",height=" + nHeight;
window.open(sUrl, "", sF);
}

function popupOrgWinWithNoScroll(sUrl, nWidth, nHeight)  // 스크롤 없는 팝업창
{
nLeft = 0;
nTop  = 0;
sF  = "";
sF += "toolbar=no,location=no,menubar=no,status=no,directories=no,resizable=no,scrollbars=no";
sF += ",left=" + nLeft;
sF += ",top=" + nTop;
sF += ",width=" +  nWidth;
sF += ",height=" + nHeight;
window.open(sUrl, "", sF);
}

function popupAsWinWithNoScroll(sName, sUrl, nLeft, nTop, nWidth, nHeight)  // 스크롤 없는 위치지정
{
sF  = "";
sF += "toolbar=no,location=no,menubar=no,status=no,directories=no,resizable=no,scrollbars=no";
sF += ",left=" + nLeft;
sF += ",top=" + nTop;
sF += ",width=" +  nWidth;
sF += ",height=" + nHeight;
window.open(sUrl, sName, sF);
}

function popupWinWithScroll(sUrl, nWidth, nHeight) //스크롤 있는 팝업창
{
nLeft = (window.screen.width - nWidth ) / 2;
nTop  = (window.screen.height- nHeight) / 2;
sF  = "";
sF += "toolbar=no,location=no,menubar=no,status=no,directories=no,resizable=no,scrollbars=yes";
sF += ",left=" + nLeft;
sF += ",top=" + nTop;
sF += ",width=" +  nWidth;
sF += ",height=" + nHeight;
window.open(sUrl, "", sF);
}

function popupOrgWinWithScroll(sUrl, nWidth, nHeight) //스크롤 있는 팝업창
{
nLeft = 0;
nTop  = 0;
sF  = "";
sF += "toolbar=no,location=no,menubar=no,status=no,directories=no,resizable=no,scrollbars=yes";
sF += ",left=" + nLeft;
sF += ",top=" + nTop;
sF += ",width=" +  nWidth;
sF += ",height=" + nHeight;
window.open(sUrl, "", sF);
}



그리고 해당 페이지내에 아래처럼 코딩하면 끝 ~

/// 페이지내 코딩방법 : 스크립트중 원한는 팝업명칭을 popupWinWithNoScroll 처럼 주면 됩니다.

<script src="파일명.js"></script>
<input type="image" src="#" onfocus='this.blur()' onClick="popupWinWithNoScroll('#', 1024, 680);"  >