确认支付手机端弹窗html,使用angular指令写一个确认弹窗（移动端）

先看效果：

App.directive('confirmModel', function () {

return {

template: '

\n' +

'

{{ title }}

\n' +

'

\n' +

'

{{ valueCancel }}

\n' +

'

{{ valueEnsure }}

\n' +

'

\n' +

'

'+

'

scope: {

title:'@',

valueEnsure:'@',

valueCancel:'@',

onCancel:'=',

onEnsure:'=',

},

controller: ["$scope", function ($scope) {

$scope.ensure=function () {

$scope.onEnsure();

}

$scope.cancel=function () {

$scope.onCancel()

}

}],

link: function (scope, elem, attrs) {

}

};

});

HTML部分：

JS部分：

$scope.courseEnsure=function () {

}

文档：

参数

类型

说明

on-cancel

Function

取消之后的回调

on-ensure

Function

确认之后的回调

title

String

标题

value-cancel

String

否

value-ensure

String

是

最后附赠css

.confirm-mask {

background-color: rgba(0, 0, 0, 0.58);

width: 100vw;

height: 100vh;

position: fixed;

left: 0;

top: 0;

z-index: 99999;

}

.confirm-model {

height: 3.15rem;

width: 6.35rem;

background-color: #ffffff;

border-radius: .2rem;

position: fixed;

margin: auto;

left: 0;

right: 0;

bottom: 0;

top: 0;

z-index: 999999;

padding: .5rem .7rem;

-webkit-box-sizing: border-box;

-moz-box-sizing: border-box;

box-sizing: border-box;

.up-panel {

font-size: .34rem;

color: #666666;

line-height: .4rem;

}

.down-panel {

display: flex;

flex-wrap: nowrap;

align-items: center;

justify-content: space-around;

margin-top: .3rem;

div {

width: 2.2rem;

height: .9rem;

text-align: center;

line-height: .9rem;

border-radius: 1rem;

font-size: .3rem;

}

.ensure {

background-color: #44c08c;

color: #ffffff;

}

.cancel {

background-color: #eaf2ef;

color: #44c08c;

}

}

}

rem换算比率：1rem=100px；