如何更改甜蜜警报 jquery 插件的叠加背景？答案

【问题标题】：How to change the Overlay background of sweet alert jquery plugin?如何更改甜蜜警报 jquery 插件的叠加背景？
【发布时间】：2018-09-03 04:13:37
【问题描述】：

<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);
}

【问题讨论】：

标签： javascript jquery plugins sweetalert

【解决方案1】：

你使用这个Sweet Alert...我之前的回答假设Sweet Alert 2，这是错误的。

提及您询问的插件的引用总是一件好事。

现在我了解到您希望在调用 Swal 实例时选择背景颜色。如果不重新设计核心代码，这是不可能的。

但我发现了一个窍门。

通过定义一个命名函数来设置一个超时来改变覆盖颜色。需要超时，因为我们无法在它存在之前更改它（它是动态创建的）。

所以我想让它易于使用的想法是定义一个颜色对象，您将使用它来选择颜色。它使代码更易于阅读。

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 叠加层是蓝色的。如果单击 Ok，则下一个 Swal 叠加层为红色...否则，如果单击取消，则为绿色。

您可以定义任意数量的颜色，并使用可读的属性名称来引用它...只需在 swal() 调用之前使用颜色名称作为参数调用 SwalOverlayColor()。

在实例初始化中有一个选项真的很接近......对吗？

【讨论】：