博客

大家都知道系统自带的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。