提示框3秒钟后自动消失

关键css

<style type="text/css">
#message, .message {position: fixed;  
top: 150px;  
left: 47%;  
width: 220px;  
margin-left: -100px;  
border-width:0;
border-radius: 0.6em;
color:#ffffff;
background-color: #2c2c2c ;
box-shadow: 0 0 12px rgba(0, 0, 0, 0.6);
padding: 10px;  
text-align:center;  
opacity: 1;
z-index:1500;
 -webkit-transition: opacity 1s ease-out; /* Saf3.2+, Chrome */  
 -moz-transition: opacity 1s ease-out; /* FF4+ */  
 -ms-transition: opacity 1s ease-out; /* IE10? */  
 -o-transition: opacity 1s ease-out; /* Opera 10.5+ */  
 transition: opacity 1s ease-out; }
</style>

关键html

<body>
<div id="message" style="display: none;"></div>
</body>

关键js

<script type="text/javascript">

msg("提示3秒,自动消失");

/**
 * 显示提示信息
 * @param text
 */
var t;
var tt;
function msg(text) {
    if(g('checkError')!=null){
        hide('checkError');
    }
    if (text == '') {
        return;
    }
    var msgDiv = g('message');
    msgDiv.innerHTML=text;
    msgDiv.style.opacity=1;
    msgDiv.style.filter="alpha(opacity=100)"; 
    show('message');
    clearTimeout(t);
    clearTimeout(tt);
    tt=setTimeout("test('message')",3000);
}
function test(id){    
    g(id).style.opacity= 0;
    g(id).style.filter="alpha(opacity=0)";  
    t=setTimeout("hide('message')",1000);    
}
function g(id) {
    return document.getElementById(id);
}
function hide(id) {
    g(id).style.display = 'none';
}
function show(id) {
    g(id).style.display = 'block';
}
</script>

 

posted @ 2017-12-15 11:30  存钱罐  阅读(2281)  评论(0)  编辑  收藏  举报