消息提示demo

最新推荐文章于 2024-09-09 09:35:48 发布

weixin_34050389

最新推荐文章于 2024-09-09 09:35:48 发布

阅读量169

点赞数

文章标签： javascript ViewUI

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

我仿照腾讯的邮箱做了个小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" οnclick="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);

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

weixin_34050389

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫