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

最新推荐文章于 2025-07-15 14:44:05 发布

公主范儿i

最新推荐文章于 2025-07-15 14:44:05 发布

阅读量6.4k

点赞数 2

CC 4.0 BY-SA版权

文章标签： JavaScript

本文链接：https://blog.youkuaiyun.com/qq_39137687/article/details/81457587

本文将介绍如何使用JavaScript创建自定义弹窗样式，包括HTML结构、CSS样式和使用方法，满足不同UI设计需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

前言：在这个看脸的时代，页面美观固然是跟重要的，系统自带的弹框样式满足不了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 {
    //用户点击取消
  }
});