이통사 WAP서비스시 alert을 통한 validation 처리를 하는 경우
KT : 보기좋은 크기로 표현
SKT : 애매한 크기로 표현
LGT : 일부단말 alert 안뜸(브라우저 버전은 같아도 년월일 에 따라 문제 발생)
기본적인 alert을 표현하는게 작아 터치폰의 경우 클릭하기가 어렵다.
결론 : LGT만 우선적으로 레이어 팝업으로 대체
/*
* 이미지 Alert 레이어를 document.body에 append 합니다.
* @param {String} message : alert message 내용
*/
function showAlert(message)
{
var maindiv = "hiddenDivh";
var serviceType = "XHTML";
var imgUrl = "이미지URL";
var baseURL = "베이스URL";
// 백그라운드 이미지 레이어 생성
var alert_div_img = document.createElement("div");
alert_div_img.setAttribute("id","alert_div_img");
alert_div_img.setAttribute("style","position: absolute; top: 0px; left: 0px; width: 240px; height: 340px;");
var backImg = document.createElement("img");
backImg.setAttribute("src",imgUrl + "/modal_popup_background.png");
backImg.setAttribute("border","0");
alert_div_img.appendChild(backImg);
// 빗살무늬 이미지 레이어 생성
var alert_div = document.createElement("div");
alert_div.setAttribute("id","alert_div");
alert_div.setAttribute("style","position: absolute; left: 0px; top: 0px; width: 240px; height: 345px; background-image: url(" + imgUrl + "/modal_popup_background_line.png);");
// 컨텐츠 영역 레이어 생성
var alert_divBody = document.createElement("div");
alert_divBody.setAttribute("align","center");
// alert 이미지 생성
var alertImg = document.createElement("img");
alertImg.setAttribute("name","alertImg");
alertImg.setAttribute("src", baseURL + "/alert_IMG.jsp?message=" + message); // alert레이어에 표현될 메세지를 그리는 영역
alertImg.setAttribute("usemap","#alertMap");
alert_divBody.appendChild(document.createElement("br"));
alert_divBody.appendChild(document.createElement("br"));
alert_divBody.appendChild(document.createElement("br"));
alert_divBody.appendChild(alertImg);
alert_div.appendChild(alert_divBody);
document.body.appendChild(alert_div_img);
document.body.appendChild(alert_div);
var hiddenDivh = document.getElementById(maindiv);
if(serviceType == "WML2" || serviceType =="XHTML")
{
hiddenDivh.style.visibility="hidden";
}
else
{
hiddenDivh.setAttribute("style", "visibility:hidden;");
hiddenDivh.setAttribute("style", "display:none;");
}
document.getElementById("closeAlertBtn").focus();
}
/*
* 이미지 Alert 레이어를 document.body에 append 합니다.
* hiddenDivh 존재시 해당 div 활성화하며,
* showAlert 메소드를 통해 정상적으로 alert_div_img, alert_div 생성되어있을 경우 remove 합니다.
*/
function closeAlert()
{
var maindiv = "hiddenDivh";
var serviceType = "XHTML";
var hiddenDivh = document.getElementById(maindiv);
var alert_div_img = document.getElementById("alert_div_img");
var alert_div = document.getElementById("alert_div");
if(alert_div_img)
document.body.removeChild(alert_div_img);
if(alert_div)
document.body.removeChild(alert_div);
if(hiddenDivh){
if(serviceType == "WML2" || serviceType =="XHTML")
{
hiddenDivh.style.visibility="visible";
}
else
{
hiddenDivh.setAttribute("style", "visibility:visible;");
hiddenDivh.setAttribute("style", "display:block;");
}
}
}
/*
* window.alsert 메소드를 재정의 합니다.
* 재정의된 layer alert 생성시 exception 발생하면 window.alert을 실행 합니다.
* @param {String} message : alert message 내용
*/
var systemAlert = new Object();
systemAlert = window.alert;
window.alert = function(message)
{ try{
showAlert(message);
}catch(e){
closeAlert();
systemAlert(message);
}
}