자바스크립트 함수 중 alert 이라는 함수를 override 하여
system modal window 가 아닌 layer 디자인을 통해 alert window를 만들어 사용할 수 있습니다.
(window.confirm 도 바꿀 수 있겠죠.. ㅎㅎ )
<!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 = "<div style="text-align: center; margin-top: 20px; position: relative;" id="alert-msg">" + msg + "</div>";
layout += "<div style="text-align: center; margin-top: 10px; bottom: 10px; position: absolute; width: 100%;"><a href="%5C%22javascript:void%28document.getElementById%28%27alert%27%29.style.display=%27none%27%29%5C%22">[close]</a></div>";
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>
</body>
</html>
<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 = "<div style="text-align: center; margin-top: 20px; position: relative;" id="alert-msg">" + msg + "</div>";
layout += "<div style="text-align: center; margin-top: 10px; bottom: 10px; position: absolute; width: 100%;"><a href="%5C%22javascript:void%28document.getElementById%28%27alert%27%29.style.display=%27none%27%29%5C%22">[close]</a></div>";
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>
</body>
</html>
system alert 과 같은 형태의 효과를 내기 위해서는 몇가지 더 추가 되어야 할 사항들이 있습니다.
alert window가 발생된 시점에 content의 모든 영역에 click을 방지 하기 위해 투명 layer로 차단해줘야 겠죠
그외에도 몇가지 더 추가 해야 할 거 같습니다.
반응형
'Developer > JavaScript' 카테고리의 다른 글
| 자바스크립트 Trim 최적화 (0) | 2008.02.11 |
|---|---|
| 태그명 알아내기 (0) | 2008.01.22 |
| JavaScript Submit Function (0) | 2007.08.02 |