关键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>