[jQuery] 구글 안내 메세지 흉내낸 함수

jGrowl이라는 플러그인을 발견했는데 내가 만든 것보다 훨씬 좋다. 이걸 추천한다. – 2011.6.24

소스코드에 오류가 있었다. 오늘 수정했다. – 2010.3.10

구글 안내 메세지라는 게 아래 버튼을 클릭해 보면 뭘 말하는 지 알 수 있을 것이다.(단, IE6에서는 메세지가 화면의 맨 위가 아니라 문서의 맨 위에 나오게 된다. 알아서 수정해 쓰시길. 난 거기까지는 필요하지 않아서 만들지 않았다.)

로드 중… 이라고 뜨는 걸 말한다.

가독성도 있고 깔끔해서 좋다.

일단 이걸 사용하려면 jQuery 1.4 이상을 사용하고 있어야 한다. 1.4 미만을 사용하고 있었다면 이 기회에 업그레이드하시라.

그리고 아래 function을 넣자.

/** 정보 메세지 출력 함수 by mytory
 */
function infoMsg(text) {
	jQuery('body').append('<p class="infoArea"></p>');
	jQuery('.infoArea').text(text).css( {
		left : (jQuery('body').width() - jQuery('.infoArea').width()) / 2 + 'px',
		top : 0
	}).fadeIn().delay(3000).fadeOut('slow', function() {
		$(this).remove();
	});
}

css도 넣어야 한다.

css는 아래와 같다.

.infoArea {
	position: fixed;
_position: absolute;
	display: none;
	background-color: #fff1a8;
	padding: 6px;
}

한 가지 더 신경써 줘야 할 게 있다. 안내 메세지를 fixed로 해 놨는데 ie6에서는 이 css가 작동하지 않는다. 그래서 _position: absolute; 를 넣었다.(디자인과 IE6를 대하는 관점 보기) ie6에서는 absolute로 화면에 고정될 것이다.

이렇게 하고 사용법은 아래와 같다.

infoMsg('안녕하세요')

이렇게 사용하면 구글처럼은 아니지만 유사한 가독성을 가지는 안내 메세지를 출력할 수 있다. css는 나름대로 맞게 수정해서 사용하시라. 배경색은 구글 것과 똑같은데, 글꼴에 대한 css는 넣지 않았다.

모서리를 둥글게 하는 것도 css에 넣지 않았다.