如何设计 sweetAlert

Question

我如何设计 AJAX 响应数据 SweetAlert 以下是我的代码和示例图片，我们将不胜感激。 Order screenshot

swal({
  title: "Confirm your transaction",
  html:true,
  showSpinner: true,
  showCancelButton: true,
  confirmButtonColor: "#DD6B55",
  confirmButtonText: "Send",
  closeOnConfirm: false
},function () {
  $.ajax({
    type: "post",
    url: remoteUrl,
    data: largeParams,
    success: function (data) { }
  }).done(function (data) {
    swal("Thank you for your order", data, "success");
  }).error(function (data) {
    swal("Oops", "We couldn't connect to the server!", "error");
  });
});

Answer 1

您应该使用提供的 css 类来设置模态内容的样式。请参阅此处的文档。那里提到了所有必需的 classes。
https://sweetalert.js.org/docs/#theming

例如：

.swal-title {
  margin: 0px;
  font-size: 25px;
  box-shadow: 0px 1px 1px rgba(0, 0, 0, 0.21);
  margin-bottom: 28px;
}

Answer 2

使用 SweetAlert2 试试这个，

.done(function (data) {
    swal({
        title: 'Thank you for your order',
        type: 'success',
        html: data
    });
});

注意： SweetAlert 存储库似乎无人维护。试试Sweetalert2。它与 Sweetalert 相同，但具有 HTML 模态支持和一些其他自定义模态选项 window - 宽度、填充、Esc 按钮行为等

Answer 3

.done(function (data) {
                    swal({
                        title: 'Thank you for your order',
                        type: 'success',
                        html: true,
                        text: data
                    });
                })

如何设计 sweetAlert

How to style sweetAlert

javascript

css

jquery

sweetalert