我们做网站，经常会遇到消息提示。
我仿照腾讯的邮箱做了个小demo。
提示出现后，几秒消失。提示的位置是固定的。不受布局的影响。
效果如下：
提示通常分两种，一种使错误提示，一种是成功提示。用不同的css已表示区分。
代码如下：
<html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <head> <script src="./js/jquery-1.4.2.min.js" type="text/javascript"></script> <link rel="stylesheet" type="text/css" href="./css/demo.css"> <script type="text/javascript"> $(document).ready(function(){ $("#message").click(function(){ showMsg('msg','success',2000); }); $("#error").click(function(){ showMsg('errmsg','fail',2000); }); }); function showMsg(msgtype,msgcontent,time){ $("#msgBoxDIV span").attr("class",msgtype).text(msgcontent); //获取提示信息并设置 $("#msgBoxDIV").show(); setTimeout(function () { $("#msgBoxDIV").hide(); }, time); } </script> </head> <div id="msgBoxDIV" style="position: absolute; 100%; padding-top: 2px; height: 24px; top: 43px; text-align: center; display: none;"> <span></span> </div> <a class="btn_gray btn_space" hidefocus="" id="message" onclick="getTop();" href="javascript:;">提示消息</a> <a class="btn_gray btn_space" hidefocus="" id="error" href="javascript:;" name="del">提示错误</a> </html>
msgBoxDIV中的位置是固定死的，里面的span可以展示错误信息。
css样式如下：
.errmsg { background: #ef8f00; z-index: 99; } .msg { background: #68af02; z-index: 99; } .msg, .errmsg { margin-left: 10px; white-space: nowrap; padding: 3px 24px 3px; color: #fff; height: 20px; line-height: 18px; border-radius: 3px; }
js中主要用到：
$("#msgBoxDIV").show(); setTimeout(function () { $("#msgBoxDIV").hide(); }, time);
显示，之后几秒再隐藏。就是这么个逻辑。