demo
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<style>
body{
margin: 0;
padding: 0;
}
</style>
<link rel="stylesheet" href="css/jquery.prompt.css" media="all" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.prompt.js"></script>
<script>
$(function () {
/*var prompt = $('.prompt');
prompt.css({
'marginLeft': -prompt.width(),
'marginTop': -prompt.height()
});*/
$('a').click(function () {
var index = $(this).index('a');
switch (index) {
case 0:
{
$.prompt('设置成功思密达', 'success', 2000, function () {
alert('已完成事件');
});
break;
}
case 1:
{
$.prompt('设置失败思密达', 'error', 2000, function () {
alert('已完成事件');
});
break;
}
case 2:
{
$.prompt('更改已完成思密达', 'information', 2000, function () {
alert('已完成事件');
});
break;
}
case 3:
{
$.prompt('由于您的操作太没有节操，设置完全失败思密达', 'warning', 5000, function () {
alert('已完成事件');
});
break;
}
}
return false;
});
});
</script>
</head>
<body>
<a href="">success</a>
<a href="">error</a>
<a href="">information</a>
<a href="">warning</a>
</body>
</html>
jquery.prompt.js代码
(function (T) {
T.extend({
prompt: function (text, type, times, callback) {
(function (element) {
if (!!element) {
element = $(element.join('')).appendTo('body');
element.css({
'marginLeft': -((element.width() + 25 * 2 /*padding*/ + 2 /*border*/ ) /2),
'marginTop': -((element.height() + 14 * 2 /*padding*/ + 2 /*border*/) /2 )
});
element.fadeIn();
times = times || 2000;
setTimeout(function () {
if (!!element) {
element.fadeOut(function () {
element.remove();
!!callback && callback();
});
}
}, times);
}
})(['<div class="prompt"><i class="', type, '"></i><span>', text, '</span></div>']);
}
});
})(jQuery);