원하는 alert창 만들기

오늘은 자바스크립트에서 alert 을 많이 사용하는데 고정적인 형태가 아니라 원하는 형식의 alert 창을 만드는 법을 설명하고자 합니다.

 

보통 modal 을 사용하면 되지만 또 다른 html 파일이 필요하고, 간단히 구현하려 하기는 거추장스러운 부분이 있어 아래 소스를 소개하고자 합니다.

 

브라우저 버젼에 따라 안되는 경우가 있을 수 있습니다. 그때는 구글링으로~~

 

* 소스코드

 

var popMsg = window.createPopup();

 

// 인자야 임의로 알아서 하시면 됩니다.

// x, y, width, height, : 시작, 크기~

// msg : 메세지

// flag : 닫기 클릭 시의 포커스

function showAlert(x, y, width, height, msg, flag)

{

 

var innerCtnt = "<table border='0' cellspacing='0' cellpadding='0' onclick=parent.closeAlert('";

innerCtnt += flag;

innerCtnt += "');><tr><td width='395' height='192' background='./img/alert.gif' border='0' align='center'><br><br>";

innerCtnt += "<textarea id='alertBox' style='border:0px;font-size:12px;overflow:hidden;' rows='2' cols='46'>";

innerCtnt += "</textarea></td></tr></table>";

 

var popBody = popMsg.document.body;

 

popBody.style.border = "solid 0px #ffffff";

 

popBody.innerHTML = innerCtnt;

 

popMsg.document.getElementById('alertBox').value = msg;                            

 

    popMsg.show(x, y, width, height, document.body);

 

}

 

// showAlert 에 의해 전달됨

function closeAlert(flag){

 

popMsg.hide();

if(flag=="dbName"){                

fm.dbName.focus();

}

if(flag=="tblName"){

fm.tblName.focus();

}

 

if(flag=="pDate"){

fm.pDate.focus();

}

}

 

 

* 사용법

 

showAlert(10, 10, 500, 500, '테스트입니다.', '');

 

 

저는 window.createPopup 이런게 있는 줄 몰랐는데 이런게 있네요..^^

 

이걸 통해 html 코드를 embed 시켜서 처리하게 되네요.