jQuery插件css3動畫模擬confirm彈窗


相比瀏覽器自帶的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嗯!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM