消息提示demo

時間 2019-11-25

標籤消息提示 demo 简体版

原文原文鏈接

咱們作網站，常常會遇到消息提示。javascript

我仿照騰訊的郵箱作了個小demo。css

提示出現後，幾秒消失。提示的位置是固定的。不受佈局的影響。html

效果以下：java

提示一般分兩種，一種使錯誤提示，一種是成功提示。用不一樣的css已表示區分。jquery

代碼以下：ide

<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中主要用到：ui

$("#msgBoxDIV").show();
        setTimeout(function () {
        $("#msgBoxDIV").hide();
        }, time);

顯示，以後幾秒再隱藏。就是這麼個邏輯。spa

相關標籤/搜索