先看下效果
js
jQuery.extend({ prompt: function (text, type, times) { var prompt = $(['<div class="prompt ', type, '"><i></i><em>', text, '</em></div>'].join('')).appendTo('body'); prompt.css('margin-left', -prompt.width()).fadeIn(); setTimeout(function () { prompt.fadeOut(function () { prompt.remove(); }); }, times); } });
css
.prompt { left: 50%; top: 50%; padding: 10px; width: auto; float: left; z-index: 9002; display: none; position: absolute; border-radius: 3px; } .prompt i { background: url(../images/pic.png) no-repeat 0 0; display: block; width: 18px; height: 18px; float: left; margin-right: 5px; } .error { background-color: #FFE4E4; border: 1px solid #F6B9B9; color: #B94A48; } .warning { background-color: #FCF6D7; border: 1px solid #FED88F; color: #C09853; } .success { background-color: #DEF1D7; border: 1px solid #BFD3AF; color: #468847; } .success i { background-position: 0 -44px; } .warning i { background-position: 0 -70px; } .error i { background-position: 0 -16px; } .prompt em { font-style: normal; font: 14px/20px '宋体'; }
使用
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title></title> <link rel="stylesheet" type="text/css" href="css/prompt.beta.min.css" /> <script type="text/javascript" src="http://code.jquery.com/jquery-2.0.3.min.js"></script> <script type="text/javascript" src="../js/prompt.min.js"></script> <script type="text/javascript"> $(function () { $.prompt('命令未成功完成', 'warning', 5000); $.prompt('提交成功', 'success', 5000); $.prompt('提交失败', 'error', 5000); }); </script> </head> <body> </body> </html>
打包下载:下载