살아 숨 쉬는 웹 - 블루비 :: [Javascript] Override window.alert()

자바스크립트 함수 중 alert 이라는 함수를 override 하여 system modal window 가 아닌 layer 디자인을 통해 alert window를 만들어 사용할 수 있습니다. (window.confirm 도 바꿀 수 있겠죠.. ㅎㅎ )

Sample Link


<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> Override Alert </title>
</head>
<body>
<script type='text/javascript'>
/***
 * Description : override alert
 * Author : blueb(xblueb@gmail.com)
 * Date : 2008-02-04
 */
	window['alert'] = function(msg){

		if( document.getElementById("alert") == null ){
		
			var cw = parseInt(document.documentElement.clientWidth);
			var ch = parseInt(document.documentElement.clientHeight);

			var _top = ch/2 - 50;
			var _left = cw/2 - 150;

			 var div = document.createElement('div');
			 div.id = "alert";
			 div.style.width = "300px";
			 div.style.height = "100px";
			 div.style.border = "5px solid #000";
			 div.style.fontSize = "9pt";
			 div.style.zIndex = "100";
			 div.style.position = "absolute";
			 div.style.top = _top +"px";
			 div.style.left = _left +"px";
			 var layout = "" + msg + "";
			 layout += "[close]";
			 div.innerHTML = layout;
			 document.body.appendChild(div);

		}else{

			var cw = parseInt(document.documentElement.clientWidth);
			var ch = parseInt(document.documentElement.clientHeight);

			var _top = ch/2 - 50;
			var _left = cw/2 - 150;

			 var div = document.getElementById("alert");
			 div.style.top = _top +"px";
			 div.style.left = _left +"px";

			document.getElementById("alert-msg").innerHTML = msg;
			document.getElementById("alert").style.display = "";
		}
		 
	};


</script>
<a href="javascript:window.alert('Hello world')">click</a>
<p> </p>
</body>
</html>

system alert 과 같은 형태의 효과를 내기 위해서는 몇가지 더 추가 되어야 할 사항들이 있습니다. alert window가 발생된 시점에 content의 모든 영역에 click을 방지 하기 위해 투명 layer로 차단해줘야 겠죠 그외에도 몇가지 더 추가 해야 할 거 같습니다.