現在的大多數網站都有校驗,以及信息提示:為瞭給用戶更好的體驗可以不用alert提示消息,采用jQuery提示完消息,自動消失,如下圖:
css:如下:
#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; }
javascript代碼如下:
<script type="text/javascript" src="js/jquery-1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ //提示成功信息 ShowSuccessMessage = function(message, life) { var time = 50000; if (!life) { time = life; } if ($("#tip_message").text().length > 0) { var msg = "" + message + ""; $("#tip_message").empty().append(msg); } else { var msg = "" + message + "
"; $("body").append(msg); } $("#tip_message").fadeIn(time); setTimeout($("#tip_message").fadeOut(time), time); }; //提示錯誤信息 ShowErrorMessage = function(message, life) { ShowSuccessMessage(message, life); $("#tip_message span").addClass("error"); }; ShowMessage("Hello success!", 5000); // 第二個參數life是指消息顯示時間 ShowErrorMessage("Hello error!", 50000); }); </script>