现在的大多数网站都有校验,以及信息提示:为了给用户更好的体验可以不用alert提示消息,采用jQuery提示完消息,自动消失。
CSS
<style> #tip_message { z-index: 9999; position: fixed; left: 0; top: 40%; text-align: center; width: 100%; } #tip_message span { background-color: #03C440; opacity: .8; padding: 20px 50px; border-radius: 5px; text-align: center; color: #fff; font-size: 20px; } #tip_message span.error { background-color: #EAA000; } </style>
javascript代码如下:
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script> <script type="text/javascript"> $(document).ready(function(){ //提示成功信息 ShowSuccessMessage = function(message, life) { var time = 3000; if (!life) { time = life; } if ($("#tip_message").text().length > 0) { var msg = "<span>" + message + "</span>"; $("#tip_message").empty().append(msg); } else { var msg = '<div id="tip_message"><span>' + message + "</span></div>"; $("body").append(msg); } $("#tip_message").fadeIn(time); $("#tip_message").fadeOut(time); }; //提示错误信息 ShowErrorMessage = function(message, life) { ShowSuccessMessage(message, life); $("#tip_message span").addClass("error"); }; ShowSuccessMessage("Hello success!", 1000); // 第二个参数life是指消息显示时间 //ShowErrorMessage("Hello error!", 1000); }); </script>