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에 넣지 않았다.
댓글 남기기