猿问

SweetAlert - 改变模态颜色

默认情况下,颜色为白色。是否可以更改sweetalert2的模态背景颜色?


我试过用 CSS 改变它,因为我在这里和这里关注另一个问题,就像这样:


.sweet-alert 

{

   background-color: #2f2f2f96;

}

但我一无所获,


我使用了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!'

    })

  }

})

我希望我可以将模态颜色更改为灰色


绝地无双
浏览 277回答 1
1回答

RISEBY

您必须 在 Swal 函数中添加背景。它会为你工作。Swal.mixin({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; input: "text",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; confirmButtonText: "Next &rarr;",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; showCancelButton: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; background: 'gray',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; progressSteps: ["1", "2", "3"]&nbsp; &nbsp; &nbsp; &nbsp; })&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .queue([&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: "Question 1",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; text: "Chaining swal2 modals is easy"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; },&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Question 2",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Question 3"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ])&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .then(result => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (result.value) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Swal.fire({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; title: "All done!",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;background: 'gray',&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; html:&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "Your answers: <pre><code>" +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; JSON.stringify(result.value) +&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; "</code></pre>",&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; confirmButtonText: "Lovely!"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });
随时随地看视频慕课网APP

相关分类

JavaScript
我要回答