근원e♡수진♡라라 일상생활

경고나 알림 창으로 자주 사용되는 window.alert  를 재정의 해서 사용 용도 및 전체적으로 변경 하여 사용 가능 하다.

Javascript 에서 사용되는 alert의 경우에 호출된 window에 포커싱이 제어되고 호출한 Javascript 의 실행이 멈춤 상태에서 알림이 종료가 되어야 진행이 계속되지만. window.alert를 재정의 한 경우에는 호출한 Javascript의 진행과 무관하게 창이 뜬다. 단순 경고나 알림 정도로 사용하거나 window.alert2 등으로 정의를 하여 사용하는 것도 괜찮은 방법이다.

단. window.alert를 변경할 경우 전체적인 javascript의 흐름이 변경이 되어 , 원하지 않은 경우도 발생할 수 있다.

전체 소스

// ID에 해당하는 객체를 가져온다.
function _g(id) {return document.getElementById(id);}

// DOM Element를 생성한다.
function _c(element) {return document.createElement(element);}

// Window Size를 구한다.
function _gSize() {
	window.myWidth = 0;
	window.myHeight = 0;
	if( typeof( window.innerWidth ) == 'number' ) 
	{
		myWidth = window.innerWidth;
		myHeight = window.innerHeight;
	} else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) ) {
		myWidth = document.documentElement.clientWidth;
		myHeight = document.documentElement.clientHeight;
	} else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) ) {
		myWidth = document.body.clientWidth;
		myHeight = document.body.clientHeight;
	}
}
// 재정의 부분
(function(){
	window._layerBodyid = '';
	window._layerBtnid = '';
	window._layerMsgid = '';
	window._layerBoxid = '';
	window._isOpen = false;

	// 고유한 값을 생성한다.
	window._mk_guid = function()
	{
		return 'alert-genid-' + 
			(((1+Math.random())*0x10000)|0).toString(16) + '-' + 
			(((1+Math.random())*0x10000)|0).toString(16);
	}
	// Window 가 리사이징 되었을때 Alert창의 위치를 계산한다.
	window.onresize = function()
	{
		if(_isOpen)
		{
			_gSize();
			var _mLayer = _g(_layerBodyid);
			_mLayer.style.width = myWidth + 'px';
			_mLayer.style.height = myHeight + 'px';

			var obox = _g(_layerBoxid);
			obox.style.left = parseInt((myWidth) - (obox.offsetWidth)) /2 + 'px';
			obox.style.top = parseInt((myHeight) - (obox.offsetHeight)) /2+ 'px';
		}
	}

	// 로드가 완료 되었을때 Alert창을 그려준다.
	window.onload = function()
	{
		_gSize();
		var body = document.body;

		// 디자인 시작 
		var maxLayer = _c('div');
		window._layerBodyid = _mk_guid();
		maxLayer.setAttribute('id', _layerBodyid); // ID값을 생성해줌
		maxLayer.style.visibility = 'hidden';
		maxLayer.style.position = 'absolute';
		maxLayer.style.zIndex = 100;
		maxLayer.style.backgroundColor = '#000';

		maxLayer.style.filter = 'alpha(opacity=50)';
		maxLayer.style.MozOpacity = 0.5;
		maxLayer.style.opacity = 0.5;

		maxLayer.style.top = '0px';
		maxLayer.style.left = '0px';
		maxLayer.style.width = myWidth + 'px';
		maxLayer.style.height = myHeight + 'px';


		var oBase = _c('div');
		window._layerBoxid = _mk_guid();
		oBase.setAttribute('id', _layerBoxid);

		oBase.style.position = 'absolute';
		oBase.style.visibility = 'hidden';
		oBase.style.backgroundColor = '#fff';
		oBase.style.position = 'absolute';
		oBase.style.zIndex = 1000;
		oBase.style.border='5px solid #3c91d1';
		oBase.style.top = '0px';
		oBase.style.left = '0px';

		var oBaseOutBox = _c('div');
		oBaseOutBox.style.marginBottom = '33px';
		oBaseOutBox.style.marginLeft = '16px';
		oBaseOutBox.style.marginRight = '17px';
		oBaseOutBox.style.marginTop = '30px';

		var oBaseOutBoxNoticeImage = _c('img');
		oBaseOutBoxNoticeImage.src = './image.gif';
		oBaseOutBoxNoticeImage.verticalAlign = 'middle';

		var oBaseOutBoxNotice = _c('div');
		oBaseOutBoxNotice.style.cssFloat = 'left';
		oBaseOutBoxNotice.style.styleFloat = 'left';
		oBaseOutBoxNotice.paddingTop = '8px';

		oBaseOutBoxNotice.appendChild(oBaseOutBoxNoticeImage);

		
		var oBaseOutBoxMessage = _c('div');
		window._layerMsgid = _mk_guid();
		oBaseOutBoxMessage.setAttribute('id', _layerMsgid);
		oBaseOutBoxMessage.style.cssFloat = 'left';
		oBaseOutBoxMessage.style.styleFloat = 'left';
		oBaseOutBoxMessage.style.marginTop = '5px';
		oBaseOutBoxMessage.style.marginLeft = '8px';
		oBaseOutBoxMessage.style.color = '#252525';
		oBaseOutBoxMessage.style.textAlign = 'left';
		oBaseOutBoxMessage.style.lineHeight = '18px';
		oBaseOutBoxMessage.style.fontSize = '12px';
		oBaseOutBoxMessage.innerHTML = 'alert';
		
		oBaseOutBox.appendChild(oBaseOutBoxNotice);
		
		oBaseOutBox.appendChild(oBaseOutBoxMessage);

		var oBaseBtnBox = _c('div');
		oBaseBtnBox.style.clear = 'both';
		oBaseBtnBox.style.textAlign = 'center';
		oBaseBtnBox.paddingBottom = '17px';

		
		var oBaseBtnImage = _c('input');
		oBaseBtnImage.type = 'image';
		_layerBtnid = _mk_guid();
		oBaseBtnImage.setAttribute('id', _layerBtnid); // 확인 버튼의 아이디
		oBaseBtnImage.src = './btn_ok.gif'; // 확인 버튼 이미지 
		oBaseBtnImage.style.marginTop = '10px';
		oBaseBtnImage.style.marginBottom = '10px';
		oBaseBtnBox.appendChild(oBaseBtnImage);


		oBase.appendChild(oBaseOutBox);
		oBase.appendChild(oBaseBtnBox);
		// 디자인 종료

		// 해당하는 객체에 이벤트를 걸어준다. 
		// 클릭시 창을 닫아주는 이벤트
		try 
		{
			oBaseBtnImage.addEventListener('click', function() {
					_g(_layerBodyid).style.visibility = 'hidden';
					_g(_layerBoxid).style.visibility = 'hidden';
					_isOpen = false;
				}, true);
		}
		catch (e)
		{
			oBaseBtnImage.attachEvent('onclick', function() {
				_g(_layerBodyid).style.visibility = 'hidden';
				_g(_layerBoxid).style.visibility = 'hidden';
				_isOpen = false;
			});
		}
		body.appendChild(maxLayer);
		body.appendChild(oBase);
		return false;
	}
	// 스크롤시 Alert창의 위치를 제어해준다.
	window.onscroll = function()
	{
		if(_isOpen)
		{
			var de = document.documentElement;
			var b = document.body;
			var now = {};

			now.X = document.all ? (!de.scrollLeft ? b.scrollLeft : de.scrollLeft) : (window.pageXOffset ? window.pageXOffset : window.scrollX);
			now.Y = document.all ? (!de.scrollTop ? b.scrollTop : de.scrollTop) : (window.pageYOffset ? window.pageYOffset : window.scrollY);

			var obox = _g(_layerBoxid);
			obox.style.top = parseInt((myHeight) - (obox.offsetHeight)) / 2 + now.Y + 'px';

			
			var _mLayer = _g(_layerBodyid);
			_mLayer.style.width = myWidth + now.X + 'px';
			_mLayer.style.height = myHeight + now.Y + 'px';
		}
	}

	// window.alert를 재정의 한다. 
	window.alert = function(message)
	{
		_g(_layerMsgid).innerHTML = message.replace("\n", "
");
		_g(_layerBodyid).style.visibility = 'visible';
		_g(_layerBoxid).style.visibility = 'visible';
		_g(_layerBtnid).focus();
		_isOpen = true;
		
		var obox = _g(_layerBoxid);
		obox.style.left = parseInt((myWidth) - (obox.offsetWidth)) / 2 + 'px';
		obox.style.top = parseInt((myHeight) - (obox.offsetHeight)) / 2 + 'px';
		
	}
})();

위 스크립트는 예시를 들은것이고 디자인부분은 자유롭게 변경할 수 있다.

// 익명함수의 실행
(function(){
	// 정의 내용
})();
// 익명함수 정의와 함께 실행하는 부분이다. 

// 사용방법
alert('테스트');

window.alert 는 재정의 하는게 올바른 방법은 아니지만 전체적인 구성이나 필요에 따라 위와 같이 재정의 해서 사용 가능하다.