仿写confirm和alert弹框

在工作中，我们常常会遇到原生的样式感觉比较丑，又和我们做的项目风格不搭。于是就有了仿写原生一些组件的念头，今天我就带大家仿写一下confirm和alert样式都可以自己修改。

有些的不好的地方请指出来，让我们共同成长，如果有不懂的也可以私聊我，我会为你详细解说。

本文有以下三个段落

1.功能代码块展示,弹框功能尺寸适用手机在电脑上看会比较大。

//弹出对话框:传了cancel是confirm,不传就是alert弹框
function Confirm(obj) {
	let _obj = obj || {};
	//视图层
	let div = '<div id="_bj" style="">' +
			'<div id="Kuang" style="">' +
				'<h3 id="Tishi">提    示</h3>' +
				'<span id="_content"></span>' +
				'<div id="_cancel" class="XuanZhe" style="left:0;">取 消</div>' +
				'<div id="_determine" class="XuanZhe" style="right:0;border-left:0.5px solid gainsboro;">确  定</div>' +
			'</div>' +
		'</div>';
	$("body").append(div);
 
	//css样式层
	$("#_bj").css({
		position:"fixed",
		top:0,left:0,
		textAlign:"center",
		width:"100vw",
		height:"100vh",
		zIndex: 998,
		background:"rgba(0,0,0,.3)",
	});
	$("#Kuang").css({
		position:"absolute",
		textAlign:"center",
		top:"50%",left:"50%",
		transform:"translate(-50%,-50%)",
		width:"900px",
		height:"450px",
		background:"#f8f8f8",
		borderRadius:"20px",
		fontSize:"50px"
	});
	//传入一个选项是alert框，两个是confirm框
	if(_obj.cancel!=""&&_obj.cancel!=null){
		$(".XuanZhe").css({
			position:"absolute",
			textAlign:"center",
			width:"50%",
			color:"#287ae8",
			borderTop:"0.5px solid gainsboro",
			bottom:0,
			lineHeight:"150px"
		});
		$("#_cancel").html(_obj.cancel);
		//交互层
		$("#_cancel").click(function() {
			$("#_bj").remove();
			_obj.callback && _obj.callback(false);
		});
		$("#_determine").click(function() {
			$("#_bj").remove();
			_obj.callback && _obj.callback(true);
		});
	}else{
		$(".XuanZhe").css({
			position:"absolute",
			textAlign:"center",
			width:"100%",
			color:"#287ae8",
			borderTop:"0.5px solid gainsboro",
			borderLeft:"none",
			left:0,
			bottom:0,
			lineHeight:"150px"
		});
		$("#_cancel").hide();
		$("#_determine").click(function() {
			$("#_bj").remove();
			_obj.callback && _obj.callback();
		});
	}
	$("#_determine").html(_obj.determine);
	$("#_content").html(_obj.content || "确定吗");
}

2.代码调用说明

2.1调用时传了cancel,弹出的是confirm

$("#btn").click(function(){
　　Confirm({
　　　　content: "确定要删除吗",cancel:"取消",determine:"确定",
　　　　callback: function(res) {//回调函数，返回true，false
　　　　　　console.log(res);
　　　　}
　　});
});

2.2调用时没有传cancel,弹出的是alert
$("#btn").click(function(){
    Confirm({
        content: "你真的喜欢我吗？",determine:"确定",
        callback: function(res) {//回调函数没有返回值
            console.log("喜欢");
        }
    });
});

3.希望大家给点优化建议，让它更好的为广大的程序员们服务。