html5自定義comfirm組件，可傳參數、回調方法

大家都知道系統自帶的confirm組件功能上可以滿足我們的需求，但是樣式很醜，而且還會暴露ip地址

這裏就做了一個confirm組建的封裝，在系統自帶組件的基礎上，效果圖如下：

  

代碼如下（左邊樣式）：

/**

 * confirm重寫

 */

    .service('showConfirm', function ($ionicPopup) {

        return {

            load: function (message, func) {

                var confirmPopup = $ionicPopup.confirm({

                    title: message,

//                    template: 'Are you sure you want to eat this ice cream?',

                    cancelText: '確定',

                    cancelType: 'button-positive',

                    okText: '取消',

                    okType: 'button-default'

                });

                confirmPopup.then(function (res) {

                    if (res) {//確定

                        console.log('You are sure');

                    } else {//取消

                        func();

                        console.log('You are not sure');

                    }

                });

            }

        };

    })

通過審查元素我們可以看到系統confirm調用的是哪些class樣式：這裏css做如下修改（一定要設置這些樣式爲最高優先級，否則有可能不顯示）：

/*confirm系統樣式*/
.popup {
    border-radius: 5px !important;
}
.popup-buttons .button {
    border-style: solid !important;
    border-width: 1px !important;
    /*border: 1px solid #000000 !important;*/
    border-radius: 5px !important;
    background-color: #FFCB00 !important;
    color: #000000 !important;
    background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #FFCB00), color-stop(0.5, #FFA300),color-stop(0.5, #FF9C00));
}

調用方法：

	showConfirm.load("確定要刪除嗎？",function(){
    		alert("刪除成功！");
	})

說明：

	message：傳提示信息

	function傳成功之後的回調函數，

	不要忘記在定義controller的時候忘記引入showConfirm	

	button-positive是設置目前選中的按鈕，如果不想用戶刪除，默認左邊的按鈕是選中狀態（取消按鈕），我這裏爲了改變用戶習慣，把右邊的按鈕設置成取消按鈕了。有需求可以修改.button.button-positive的樣式

下面是系統自帶的confirm所包含的屬性，不寫則不顯示：

title：主標題，cssClass:用戶自定義樣式；subTitle:子標題；template填寫的時候會覆蓋subTitle，如不寫則顯示subTitle。