原生js封装confirm、alert
<style>
html,body{
width:100%;
height:100%;
padding: 0 ;
margin: 0 ;
}
.appvideo {
width: 100%;
height: 100%;
}
.share_mark {
width: 100%;
height:100%;
background: rgba(0, 0, 0, .5);
position: fixed;
left: 0;
top: 0;
z-index: 10001;
}
.share_box {
background: #fff;
width: 300px;
position: absolute;
left: 50%;
top: 50%;
transform: translate3d(-50%, -50%, 0);
border-radius:10px;
}
.share_mark_tit {
width: 80%;
margin: 0 auto;
text-align: center;
font-size: 16px;
padding: 15px 0;
}
.share_btn {
border-top: solid 1px #D7D7D7;
display: flex;
text-align: center;
font-size: 14px;
line-height: 40px;
}
.share_cancel {
flex: 1;
border-right: solid 1px #D7D7D7;
color: rgb(102, 102, 102);
}
.share_go {
flex: 1;
color: #CCAB86;
}
</style>
<script>
var myConfirm = function(value, cancelText, sureText, type, resCallback) {
var div =
`
<div class="appvideo" id="video_box">
<div class="share_mark">
<div class="share_box">
<div class="share_mark_tit">${value || '内容'}</div>
<div class="share_btn">
<div class="share_cancel">${cancelText || '取消'}</div>
<div class="share_go">${sureText || '确认'}</div>
</div>
</div>
</div>
</div>
</div>
`
var divSingle =
`
<div class="appvideo" id="video_box">
<div class="share_mark">
<div class="share_box">
<div class="share_mark_tit">${value || '内容'}</div>
<div class="share_btn">
<div class="share_go">${sureText || '确认'}</div>
</div>
</div>
</div>
</div>
</div>
`
var box = document.createElement("div")
box.innerHTML = (type == 1 ? div : divSingle)
document.body.appendChild(box)
// 取消
if(type == 1){
document.querySelector('.share_cancel').addEventListener('click',function(e){
box.innerHTML = ' '
resCallback({
'status':false
})
})
}
// 确认
document.querySelector('.share_go').addEventListener('click',function(e){
box.innerHTML = ' '
resCallback({
'status':true
})
})
}
myConfirm('因银行系统升级维护调整，为了给您带来更好的用户体验，需要重新绑定银行卡，给您带来的不便尽请谅解。','这是取消','这是确认',1,function (res) {
console.log(res)
if(res.status){
// alert('确认')
}else{
// alert('取消')
}
})
</script>
若是不支持es6 语法 需要字符串拼接
var div =
"<div class='appvideo' id='video_box'>" +
"<div class='share_mark'>" +
"<div class='share_box'>" +
"<div class='share_mark_tit'>" + (value ? value : '内容') + "</div>" +
"<div class='share_btn'>" +
"<div class='share_cancel'>"+ (cancelText?cancelText :'取消')+"</div>" +
"<div class='share_go'>"+ (sureText?sureText:'确认')+"</div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>"
var divSingle =
"<div class='appvideo' id='video_box'>" +
"<div class='share_mark'>" +
"<div class='share_box'>" +
"<div class='share_mark_tit'>" + (value ? value : '内容') + "</div>" +
"<div class='share_btn'>" +
"<div class='share_go'>"+ (sureText?sureText:'确认')+"</div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>" +
"</div>"
