간단하고 아름다운 애니메이션 효과, 좋은 사용자 경험! 이 효과는 페이지 상단에 나타납니다. x 프롬프트가 있으면 수동으로 닫아야 합니다. 알림: jquery 1.6.2 버전을 기반으로 합니다! 코드 복사 코드는 다음과 같습니다. < 범위 ID= "메시지 텍스트"> ; 호출 방법: 코드 복사 코드는 다음과 같습니다. < script type="text/javascript" src="sysmsg.js"> show('메일 형식 오류 !', "error") <br>ZENG.SysMsg.show('다시 시도하세요!', "alert") <br>ZENG.SysMsg.show('저장 성공!') ;</script> ; <br><br> </div>jquery 버전: <br><br><div class="codetitle"><span><a style="CURSOR: pointer" data="21463" class="copybut" id="copybut21463" onclick="doCopy('code21463')">코드 복사 <u></u></a> 코드는 다음과 같습니다. </span></div> <div class="codebody" id="code21463">/*! <br>* jQuery JavaScript SysMsg v1.0 <br>* http://zengxiangzhan.cnblogs.com/ <br>* jQuery.sysmsg.js <br>* 저작권 2011, Zeng Xiangzhan<br> * 날짜: 2011-8-1 20:00 2011 -2210 <br>*/ <br>if (!window.ZENG) var ZENG = <br>ZENG.add = function (d, f) { <br>var j <br>if ($.isFunction(f.init)) { <br>j = f.init <br>delete f.init; (true, j.prototype, f); <br>this[d] = j <br>} else this[d] = f <br>}; ZENG.add("SysMsg", function() { <br>function d(u , D, v) { <br>D || (D = "성공") <br>v = v || D == "오류" <br> <br>h.push( function() { <br>d(u, D) <br>}) <br>f() <br>} else { <br>m.html(u); >i.removeClass().addClass(D).show().animate({ <br>top: 0 <br>}, 200, function() { <br>v || j() <br>}) ; <br>o = 1 <br>} <br>} <br>function f() { <br>i.animate({ <br>top: "-50px" <br>}, 200, function() { <br>i.hide (); <br>o = 0; <br>h.length && h.shift()() <br>}) <br>} <br>function j() { <br>setTimeout(function() { <br>f() <br>}, 2E3) <br>} <br>var o, h = [], <br>i = $("#message-dock"), <br>m = i.find("#message-text"); <br>$(".dismiss", "#message-dock").live("click", function(u) { <br>f (); <br>u .preventDefault() <br>}); <br>return { <br>show: d <br>} <br>}()) <br><br> <br> style<br><br> </div> <br><br>코드 복사<div class="codetitle"><span><a style="CURSOR: pointer" data="60984" class="copybut" id="copybut60984" onclick="doCopy('code60984')"> 코드는 다음과 같습니다.<u><div class="codebody" id="code60984"> <br>.group { <br>디스플레이: 블록; <br>} <br>.group:after { <br>clear: 둘 다; <br>내용: "."; <br>디스플레이: 블록; <br>높이: 0; <br>가시성: 숨김; <br>} <br>.group { <br>최소 높이: 1%; <br>} <br>* html .group { <br>높이: 1%; <br>} <br>html, body, div,p{ <br>배경: 없음 반복 스크롤 0 0 투명; <br>경계: 0 없음; <br>글꼴 크기: 100%; <br>여백: 0; <br>개요: 0 없음; <br>수직 정렬: 기준선; <br>} <br>본문 { <br>색상: #444444; <br>글꼴 계열: "Helvetica Neue",Helvetica,Arial,sans-serif; <br>글꼴 크기: 75%; <br>줄 높이: 1; <br>} <br>#message-dock { <br>배경색: #164673; <br>색상: #FFFFFF; <br>줄 높이: 1.75em; <br>패딩: 10px; <br>위치: 고정; <br>상단: -60px; <br>너비: 100%; <br>z-색인: 9999; <br>} <br>#message-dock a { <br>색상: #FFFFFF; <br>글꼴 두께: 굵게; <br>텍스트 장식: 밑줄; <br>} <br>#message-dock p { <br>border-radius: 5px 5px 5px 5px; <br>플로트: 왼쪽; <br>패딩: 5px 6px; <br>} <br>#message-dock .dismiss { <br> background: url("msg.png") 반복 스크롤 -67px -180px #A12A2A; <br>테두리 반경: 0 5px 5px 0; <br>디스플레이: 없음; <br>플로트: 왼쪽; <br>높이: 21px; <br>왼쪽 여백: 10px; <br>텍스트 들여쓰기: -999999px; <br>너비: 20px; <br>커서: 포인터; <br>} <br>.sprite { <br> background: url("msg.png") 반복 없음 스크롤 0 0 transparent; <br>디스플레이: 인라인 블록; <br>수직 정렬: 상단; <br>} <br>#message-sleeve { <br>여백: 0 자동; <br>최대 너비: 1200px; <br>최소 너비: 1000px; <br>} <br>.fixed #message-sleeve { <br>너비: 1000px; <br>} <br>#message-text { <br>float: 왼쪽; <br>글꼴 크기: 1.16667em; <br>패딩: 0 10px 0 0; <br>} <br>.success p { <br>배경색: #7AA13D; <br>} <br>.alert p { <br>배경색: #FFF095; <br>색상: #333333; <br>} <br>.alert a { <br>색상: #333333 !important; <br>} <br>.error p { <br>배경색: #A12A2A; <br>패딩 오른쪽: 0 !중요; <br>} <br>.error #message-text { <br>padding-right: 0; <br>} <br>.error .dismiss { <br>display: block !important; <br>} <br>.error .message-icon, .alert .message-icon { <br>배경 위치: 0 -249px; <br>} <br>.message-icon { <br>배경 위치: -21px -249px; <br>플로트: 왼쪽; <br>높이: 21px; <br>여백 오른쪽: 6px; <br>위치: 친척; <br>너비: 21px; <br>} <br> </div> <br>附件： <br><br><img title="曾祥展" style="max-width:90%" style="max-width:90%" alt="曾祥展" src="http://files.jb51.net/upload/201108/20110802224841958.png" style="max-width:90%" border="0"> </u><p><br>完毕!</p></a></span></div>
