前端自定义提示框样式之--confirm 带回调

前言:在这个看脸的时代,页面美观固然是跟重要的,系统自带的弹框样式满足不了UI设计的需求,那么只能自己动手做一个了。还是直接上代码吧

公共js代码:

//公共弹窗
var myConfirm = function(title, cantxt, suretxt, type, resCallback) {
  var div = '<div class="cover"><div class="confirmbox"><div class="line1">' + title + '</div><div class="line2">';
  if(type == 1){
  	div += '<span class="cancle" id="cancle">' + cantxt + '</span><span class="sure" id="sure">' + suretxt + '</span>';
  }else if(type == 2) {
  	div += '<span class="cancle" id="cancle" style="color:#D2AA72">' + cantxt + '</span>';
  }
  div += '</div></div></div>';
  $('body').append(div)
  $('.cover').show();
	$('#cancle').click(function(){
		$('.cover').remove();
		resCallback({
			'status': false
		});
	});
	$('#sure').click(function(){
		$('.cover').remove();
		resCallback({
			'status': true
		});
	});
}
参数说明

title你要提示的内容
cantxt取消操作显示的文字
suretxt确定操作显示的文字
type

1:有两个选项确定、取消;即cantxt和suretxt必填

2:只有一个选项;即cantxt为空、suretxt必填

resCallback回调,具体用法见下引用

公共css代码:

/*自制confirm样式*/

.cover {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.3);
  z-index: 999;
}
.cover .confirmbox {
  background: #fff;
  width: 5.02rem;
  height: 2.36rem;
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  margin: auto;
  border-radius: 0.1rem;
}
.cover .confirmbox .line1 {
  line-height: 1.47rem;
  text-align: center;
  font-size: 0.32rem;
  border-bottom: #dfdfdf solid 1px;
}
.cover .confirmbox .line2 {
  line-height: 0.88rem;
  display: flex;
  justify-content: space-around;
  font-size: 0.32rem;
}
.cover .confirmbox .line2 span {
  display: block;
  width: 50%;
  text-align: center;
}
.cover .confirmbox .line2 .sure {
  color: #D2AA72;
  border-left: #dfdfdf solid 1px;
}

页面引用:

//你的代码
myConfirm('你的提示语','取消','确定','1',function(res){
  console.log(res);
  if(res.status){
    //用户点击确定 						
  }else {
    //用户点击取消
  }
});
//你的代码
myConfirm('你的提示语','','我知道啦','2',function(res){
  console.log(res);
  if(res.status){
    //用户点击确定 						
  }else {
    //用户点击取消
  }
});

 

    原文作者:公主范儿i
    原文地址: https://blog.csdn.net/qq_39137687/article/details/81457587
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞