標籤：style class blog code java http
引言：
原生的 alert 樣子看起來很粗暴，網上也有一大堆相關的外掛程式，但是基本上都是大而全，僅僅幾句話可以實現的東西，可能要引入好幾十k的檔案，所以話了點時間自己寫了個彈出效果，放到項目上去發現效果還不錯，這裡貼出來，做個備忘，有需要的同學可以拿去，也可以作為一個參考。
1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> 2 <html> 3 <head> 4 <title> 測試</title> 5 <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.1.min.js"></script> 6 <style> 7 /** 8 樣式如果自己覺得黑乎乎不好看可以修改 9 **/10 .ec_tip{11 display:none;12 padding:5px;13 position: absolute; 14 background: #555;15 color:#fff;16 border: 3px solid #555;17 z-index: 9999; 18 }19 </style>20 </head>21 <body style="height:500px;">22 </body>23 <SCRIPT type="text/javascript">24 //彈出提示效果25 window.Alert = function(messages,callback){26 if($(".ec_tip").length<1){27 $("body").append("<div class=\"ec_tip\">"+messages+"</div>");28 }29 //定位置中顯示30 leftW = (document.body.clientWidth-$(".ec_tip").width())/2;31 topH = (document.body.clientHeight-$(".ec_tip").height())/2;32 $(".ec_tip").css("top", topH+"px").css("left", leftW+"px").fadeIn(2000);33 //談出效果並執行回調34 $(".ec_tip").animate({top:"0px",opacity:0},2000,function(){35 $(".ec_tip").remove();36 if(callback!=undefined)37 callback();38 });39 }
//Alert("世界你好，沒有回調");40 Alert("你好世界", function(){alert("回調提示")});41 </SCRIPT>42 </html>
備忘：js代碼就這麼簡單的10來行，你也可以Alert改成 alert 直接重寫了原生的alert方法。原生的alert 也不支援回調，這裡同時支援原生的基礎上加入回呼函數。應該還不錯哦！！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
