[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에 넣지 않았다.

카테고리 글 목록 👉

,

대표글

“[jQuery] 구글 안내 메세지 흉내낸 함수”에 대한 4개의 응답

  1. 음,, 나중에 한번 제 블록에도 적용해 봐야겠어요. ^^& 감사합니다.

    1. 넹 ^^ 저도 이거 만들고 나서 이건 곳곳에 적용할 수 있겠다 싶어서 소스 공개했어요. 플러그인으로 만들면 더 좋겠지만 거기까지 욕심내진못했고요 ㅋ
      몇 가지 더 수정하고싶은 게 있는데 할 수 있을지는 모르겠어요 ^^

  2. 웹사이트에 append 사용해서 메세지 뛰우는거 적용해보려 하는데요

    메일로 자세히 소스 보내주실수 있으세요 혹시

    1. 공개해놓은 게 소스의 전부입니다.

댓글 남기기