首页 > 代码库 > Jquery 网站保存信息提示消息实现，提示后自动消失
Jquery 网站保存信息提示消息实现，提示后自动消失
现在的大多数网站都有校验，以及信息提示：为了给用户更好的体验可以不用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>
Jquery 网站保存信息提示消息实现，提示后自动消失
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。