javascript 如何设计sweetAlert
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/46360512/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to style sweetAlert
提问by Iamgisnet
How do I style AJAXrespond data in SweetAlertbelow is my code and sample image any help will be duly appreciated. Order screenshot
我如何设计下面的AJAX响应数据样式SweetAlert是我的代码和示例图像，我们将不胜感激。 订单截图
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");
});
});
回答by Thusitha
You should use the provided cssclasses to style the modal content.
See the docs here. All required classesare mentioned there.
https://sweetalert.js.org/docs/#theming
您应该使用提供的css类来设置模式内容的样式。请参阅此处的文档。所有必需的classes都在那里提到。
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;
}
回答by Parag Jadhav
Try this using SweetAlert2,
使用 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.
注意：SweetAlert 存储库似乎没有维护。试试Sweetalert2。它与 Sweetalert 相同，但在模态中具有 HTML 支持，以及用于自定义模态窗口的一些其他选项 - 宽度、填充、Esc 按钮行为等。
回答by Iamgisnet
.done(function (data) {
swal({
title: 'Thank you for your order',
type: 'success',
html: true,
text: data
});
})
