Simple, beautiful, animation effect, user experience good!
This effect is on the head of the page, appear will automatically hidden, there are X that hint will manually shut down, the other is automatically hidden!
Warm tip: Based on jquery 1.6.2 version!
Copy Code code as follows:
<div id= "Message-dock" >
<div id= "Message-sleeve" class= "group" >
<p><span class= "Sprite Message-icon" ></span><span id= "Message-text" ></span><a class= "Dismiss" ></a></p>
</div>
</div>
Call Mode:
Copy Code code as follows:
<script type= "Text/javascript" src= "Sysmsg.js" ></script>
<script type= "Text/javascript" >
ZENG. Sysmsg.show (' message format is wrong! ', ' error ');
ZENG. Sysmsg.show (' Please come back again! ', ' alert ');
ZENG. Sysmsg.show (' Save success! ');</script>
jquery version:
Copy Code code as follows:
/*!
* JQuery JavaScript Sysmsg v1.0
* http://zengxiangzhan.cnblogs.com/
* JQuery.sysmsg.js
* Copyright 2011, Zengxiang Exhibition
* Date:2011-8-1 20:00 2011-2210
*/
if (!window. ZENG) var ZENG = {};
Zeng.add = function (d, f) {
var J;
if ($.isfunction (F.init)) {
j = F.init;
Delete F.init;
$.extend (True, J.prototype, f);
This[d] = j
else this[d] = f
};
Zeng.add ("Sysmsg", function () {
function d (U, D, v) {
D | | (D = "Success");
v = v | | D = = "Error";
if (o) {
H.push (function () {
D (U, D)
});
F ()
} else {
m.html (U);
I.removeclass (). addclass (D). Show (). Animate ({
top:0
}, function () {
V | | J ()
});
o = 1
}
}
function f () {
I.animate ({
Top: " -50px"
}, function () {
I.hide ();
o = 0;
H.length && H.shift () ()
})
}
Function J () {
settimeout (function () {
F ()
}, 2E3)
}
var o, h = [],
i = $ ("#message-dock"),
m = I.find ("#message-text");
$ (". Dismiss", "#message-dock"). Live ("Click", Function (U) {
f ();
U.preventdefault ()
});
return {
Show:d
}
}());
Beautiful style
Copy Code code as follows:
. group {
Display:block;
}
. group:after {
Clear:both;
Content: ".";
Display:block;
height:0;
Visibility:hidden;
}
. group {
min-height:1%;
}
* HTML. Group {
height:1%;
}
HTML, body, div,p{
Background:none Repeat scroll 0 0 transparent;
border:0 none;
font-size:100%;
margin:0;
outline:0 none;
Vertical-align:baseline;
}
Body {
Color: #444444;
font-family: "Helvetica neue", Helvetica,arial,sans-serif;
font-size:75%;
Line-height:1;
}
#message-dock {
Background-color: #164673;
Color: #FFFFFF;
Line-height:1.75em;
padding:10px;
position:fixed;
Top: -60px;
width:100%;
z-index:9999;
}
#message-dock a {
Color: #FFFFFF;
Font-weight:bold;
Text-decoration:underline;
}
#message-dock p {
border-radius:5px 5px 5px 5px;
Float:left;
padding:5px 6px;
}
#message-dock. Dismiss {
Background:url ("Msg.png") repeat scroll-67px-180px #A12A2A;
border-radius:0 5px 5px 0;
Display:none;
Float:left;
height:21px;
padding-left:10px;
Text-indent: -999999px;
width:20px;
Cursor:pointer;
}
. Sprite {
Background:url ("Msg.png") no-repeat scroll 0 0 transparent;
Display:inline-block;
Vertical-align:top;
}
#message-sleeve {
margin:0 Auto;
max-width:1200px;
min-width:1000px;
}
. Fixed #message-sleeve {
width:1000px;
}
#message-text {
Float:left;
Font-size:1.16667em;
padding:0 10px 0 0;
}
. Success P {
Background-color: #7AA13D;
}
. alert P {
Background-color: #FFF095;
Color: #333333;
}
. Alert a {
Color: #333333!important;
}
. Error P {
Background-color: #A12A2A;
Padding-right:0!important;
}
. Error #message-text {
padding-right:0;
}
. Error. Dismiss {
Display:block!important;
}
. Error. Message-icon,. Alert. Message-icon {
Background-position:0 -249px;
}
. Message-icon {
Background-position: -21px-249px;
Float:left;
height:21px;
margin-right:6px;
position:relative;
width:21px;
}
Attachment:
Complete!
