简体   繁体   English

SweetAlert - 更改模态颜色

[英]SweetAlert - Change modal color

By default the colour is white.默认情况下,颜色为白色。 Is it possible to change modal background color of sweetalert2?是否可以更改 sweetalert2 的模态背景颜色?

I have tried it to change with CSS, as I follow on the other question here and here , like this:我已经尝试用 CSS 对其进行更改,因为我在此处此处关注另一个问题,如下所示:

.sweet-alert 
{
   background-color: #2f2f2f96;
}

but I got nothing,但我一无所获,

i use the sweetalert question feature我使用 sweetalert 问题功能

Swal.mixin({
  input: 'text',
  confirmButtonText: 'Next →',
  showCancelButton: true,
  progressSteps: ['1', '2', '3']
}).queue([
  {
    title: 'Question 1',
    text: 'Chaining swal2 modals is easy'
  },
  'Question 2',
  'Question 3'
]).then((result) => {
  if (result.value) {
    Swal.fire({
     title: 'All done!',
     html:
       'Your answers: <pre><code>' +
         JSON.stringify(result.value) +
        '</code></pre>',
      confirmButtonText: 'Lovely!'
    })
  }
})

I wish i can change the modal colour to grey我希望我可以将模态颜色更改为灰色

You have to add background in Swal function.您必须在 Swal function 中添加背景 It will Works for you.它会为你工作。

Swal.mixin({
          input: "text",
          confirmButtonText: "Next &rarr;",
          showCancelButton: true,
          background: 'gray',
          progressSteps: ["1", "2", "3"]
        }) 
          .queue([
            {
              title: "Question 1",
              text: "Chaining swal2 modals is easy"
            },
            "Question 2",
            "Question 3"
          ])

          .then(result => {
            if (result.value) {
              Swal.fire({
                title: "All done!",
                 background: 'gray',
                html:
                  "Your answers: <pre><code>" +
                  JSON.stringify(result.value) +
                  "</code></pre>",
                confirmButtonText: "Lovely!"
              });
            }
          });

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM