jQuery外掛程式css3動畫類比confirm彈窗

標籤：style   blog   http   io   color   ar   java   sp   on   

相比瀏覽器內建的alert、confirm，能力所及，我更喜歡所有的東西都是自訂：
首先在head標籤（當然喜歡其他地方自己看著辦）內引入外掛程式樣式表和js。
<link rel="stylesheet" href="css/WeiConfirm.css" />    —如果可以，可以自己修改UI
<script type="text/javascript" src="js/jquery.js" ></script>    —必須先引入jQuery
<script type="text/javascript" src="js/WeiConfirm.js" ></script>    —再引入外掛程式js
 
接下來就是調用方法，先看看漂亮的效果吧：


上面圖片效果調用用方法：
<script>
$(function(){
        $.confirm(‘我是漂亮的confirm彈窗,帶css3動畫哦‘,function(){
                $.confirm(‘你單擊的確定‘)
        });
});
</script>
 
接下來詳細說明參數不同時的調用效果：
預設—標題為：【溫馨提示】
        —按鈕分別為【確定】和【取消】
        —其他3個參數都為空白，一共6個參數

             //參數是1個，參數為資訊內容
                $.confirm(‘我是漂亮的confirm彈窗‘);
               


                //參數是2個，前一個為內容，後一個為點擊【確定】後執行的函數
                $.confirm(‘我是漂亮的confirm彈窗‘,function(){
                    alert(‘點擊確定執行的函數‘)
                });
               
                //參數是3個，第一個為內容，第二個為點擊【確定】後執行的函數，第三個為點擊【取消】後執行的函數
                $.confirm(‘我是漂亮的confirm彈窗‘,function(){
                    alert(‘點擊確定執行的函數‘)
                },function(){
                    alert(‘點擊取消後執行的函數‘)
                });
               
                //參數是4個，第一個為內容，第二個替換預設為【確定】的值，第三個為點擊【“確定”】後執行的函數，第四個為點擊【取消】後執行的函數
                $.confirm(‘我是漂亮的confirm彈窗‘,‘還是確定‘,function(){
                    alert(‘點擊還是確定執行的函數‘)
                },function(){
                    alert(‘點擊取消後執行的函數‘)
                });
               
               

                //剩下就是參數為6個，不解釋了，看下面，很好理解
                $.confirm(‘標題哈哈‘,‘內容哈哈‘,‘確定哈哈‘,‘取消哈哈‘,function(){
                    alert(‘你單擊的是確定哈哈‘);
                },function(){
                    alert(‘你單擊的是取消哈哈‘);
                });
            

相容性：
    勉強相容ie8，本來好的效果都沒想過相容IE，更別說ie6了。

外掛程式下載：
http://pan.baidu.com/s/1gdFyPtp（源碼沒有壓縮，歡迎交流探討學習）

還有：

不知道代碼寫的好不好，希望大神能指教正一下O(∩_∩)O嗯！

jQuery外掛程式css3動畫類比confirm彈窗