<script>
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this imaginary file!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
} else {
swal("Your imaginary file is safe!");
}
});
</script>
如何在上面的代码中实现下面的方法。 我想将叠加背景更改为不同的颜色。
.swal-overlay {
background-color: rgba(43, 165, 137, 0.45);
}
答案 0 :(得分:0)
您使用此Sweet Alert ...我以前的答案假定为Sweet Alert 2,这是错误的。
提及对您所要求的插件的引用总是一件好事。
但是我发现了一个窍门。
通过定义一个命名函数来设置超时以更改覆盖颜色。需要超时是因为我们无法在它存在之前更改它(它是动态创建的)。
因此,我要使其易于使用的想法是还定义一个颜色对象,以用于选择颜色。并且使代码更易于阅读。
var SwalColors = {
red: "rgba(250, 50, 50, 0.45)",
green: "rgba(50, 250, 50, 0.45)",
blue: "rgba(0, 0, 255, 0.45)"
};
function SwalOverlayColor(color){
setTimeout(function(){
$(".swal-overlay").css({"background-color":SwalColors[color]});
},200);
}
SwalOverlayColor("blue");
swal({
title: "Are you sure?",
text: "Once deleted, you will not be able to recover this imaginary file!",
icon: "warning",
buttons: true,
dangerMode: true,
})
.then((willDelete) => {
if (willDelete) {
SwalOverlayColor("red");
swal("Poof! Your imaginary file has been deleted!", {
icon: "success",
});
} else {
SwalOverlayColor("green");
swal("Your imaginary file is safe!");
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/sweetalert/2.1.0/sweetalert.min.js"></script>
如您所见,第一个Swal叠加层为蓝色。如果单击确定,则下一个Swal叠加层为红色...否则,如果单击取消,则为绿色。
您可以根据需要定义任意多个颜色,并使用可读的属性名称来引用它。...只需在调用SwalOverlayColor()
之前以颜色名称作为参数调用swal()
。 / p>
在实例初始化中几乎可以选择一个选项,对吧?