CODEWITHSUNDEEP
javascriptjquerycsssweetalert
Iamgisnet
Iamgisnet

Reputation: 179

How to style sweetAlert

How do I style AJAX respond data in SweetAlert below is my code and sample image any help will be duly appreciated. 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");
  });
});

Upvotes: 1

Views: 30016

Answers (3)

Iamgisnet
Iamgisnet

Reputation: 179

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

Upvotes: 1

Parag Jadhav
Parag Jadhav

Reputation: 1899

Try this using SweetAlert2, 

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

Note: The SweetAlert repo seems to be unmaintained. Give a try to Sweetalert2. It is same as that of Sweetalert but with HTML support in modal and some other options for customization modal window - width, padding, Esc button behavior, etc.

Upvotes: 1

Thusitha
Thusitha

Reputation: 3511

You should use the provided css classes to style the modal content. See the docs here. All required classes are mentioned there.
https://sweetalert.js.org/docs/#theming

Ex:

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

Upvotes: 2

Related Questions