Как изменить фон наложения сладкого оповещения jquery-плагина? - PullRequest
Новая
       9

Как изменить фон наложения сладкого оповещения jquery-плагина?

0 голосов
/ 03 сентября 2018 
<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);
}

1 Ответ

0 голосов
/ 03 сентября 2018

Вы используете это Сладкое оповещение ... Мой предыдущий ответ предполагал Сладкое оповещение 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 - синее. Если вы нажмете «ОК», следующее наложение Swal будет красным… Иначе, если вы нажмете «Отмена», оно будет зеленым.

Вы можете определить столько цветов, сколько пожелаете, и обращаться к нему с помощью читаемого имени свойства ... Просто вызовите SwalOverlayColor() с именем цвета в качестве аргумента прямо перед вызовом swal().

Это очень близко, чтобы иметь опцию в инициализации экземпляра ... Верно?

...