Javascript 如何将 HTML 输入添加到甜蜜警报中？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/32012913/
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 add HTML input into sweet alert?
提问by b22
I am trying to add radio button into dialog box using sweet alert but I'm not able to do it. Following is the code:
我正在尝试使用甜蜜警报将单选按钮添加到对话框中，但我无法做到。以下是代码：
swal({
title: "<small>Please select an reason to cancel this job !</small>",
type: "warning",
text:"<input type=\"radio\" name=\"reason\" value=\"male\">Reason 1<br><input type=\"radio\" name=\"reason\" value=\"female\">Reason 2<br><input type=\"radio\" name=\"reason\" value=\"female\">Other Reason",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes",
cancelButtonText: "No",
closeOnConfirm: false,
closeOnCancel: false,
html: true
},
function(isConfirm){
if (isConfirm) {
swal("Result !","Job cancelled successfully.");
} else {
swal("Cancelled !", "Process aborted");
}
});
回答by Micha? Per?akowski
Default sweetalert's stylesheet hides all input fields in alerts, so you have to restore initial values:
默认的 sweetalert 样式表隐藏了警报中的所有输入字段，因此您必须恢复初始值：
.sweet-alert input {
display: initial;
width: auto;
height: auto;
margin: auto;
}
回答by Limon Monte
SweetAlert2supports radio inputs out of the box: https://sweetalert2.github.io/#input-radio
SweetAlert2支持开箱即用的无线电输入：https: //sweetalert2.github.io/#input-radio
Swal.fire({
title: 'Select color',
input: 'radio',
inputOptions: {
'#ff0000': 'Red',
'#00ff00': 'Green',
'#0000ff': 'Blue'
},
// validator is optional
inputValidator: function(result) {
if (!result) {
return 'You need to select something!';
}
}
}).then(function(result) {
if (result.value) {
Swal.fire({
type: 'success',
html: 'You selected: ' + result.value
});
}
})<script src="https://cdn.jsdelivr.net/npm/sweetalert2@8"></script>