您的位置：首页 > 其它

消息提示demo

2013-12-13 16:46 393 查看

我们做网站，经常会遇到消息提示。

我仿照腾讯的邮箱做了个小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; width: 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);

显示，之后几秒再隐藏。就是这么个逻辑。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航