본문 바로가기

script&css&html&ajax

window.alert overload (3사 이통사 WAP 서비스시 LGT alert창의 크기가 작음)


이통사 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);
 }
}