Javascript Sweetalert 2 上有超过 2 个按钮
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/39268318/
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
More than 2 buttons on sweetalert 2
提问by Sukhwinder Sodhi
I have a sweetalert with 2 buttons but I want to have one more button in it. For example, as of now, I have yes and no I want to add one more button say later. Please help.
我有一个带 2 个按钮的甜甜圈，但我想再添加一个按钮。例如，截至目前，我有是和否，我想再添加一个按钮，稍后再说。请帮忙。
$("#close_account").on("click", function(e) {
e.preventDefault();
swal({
title: "Are you sure?",
text: "You will not be able to open your account!",
type: "warning",
showCancelButton: true,
confirmButtonColor: "#DD6B55",
confirmButtonText: "Yes, close my account!",
closeOnConfirm: false
},
function() {
window.location.href="<?php echo base_url().'users/close_account' ?>"
});
});
Thanks in advance.
提前致谢。
回答by Konstantin Azizov
You should use custom HTML with jQuery event bindings, it works almost the same, only problem that you need to add styling for buttons by yourself because SweetAlert classes don't work for me.
您应该使用带有 jQuery 事件绑定的自定义 HTML，它的工作原理几乎相同，唯一的问题是您需要自己为按钮添加样式，因为 SweetAlert 类对我不起作用。
$(document).ready(function() {
$("#close_account").on("click", function(e) {
var buttons = $('<div>')
.append(createButton('Ok', function() {
swal.close();
console.log('ok');
})).append(createButton('Later', function() {
swal.close();
console.log('Later');
})).append(createButton('Cancel', function() {
swal.close();
console.log('Cancel');
}));
e.preventDefault();
swal({
title: "Are you sure?",
html: buttons,
type: "warning",
showConfirmButton: false,
showCancelButton: false
});
});
});
function createButton(text, cb) {
return $('<button>' + text + '</button>').on('click', cb);
}<link href="https://cdn.jsdelivr.net/sweetalert2/4.2.4/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/sweetalert2/4.2.4/sweetalert2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="close_account">Show</button>回答by Ricardo Melo
The above answer didn't work for me, so I did the following:
上面的答案对我不起作用，所以我做了以下事情：
$(document).on('click', '.SwalBtn1', function() {
//Some code 1
console.log('Button 1');
swal.clickConfirm();
});
$(document).on('click', '.SwalBtn2', function() {
//Some code 2
console.log('Button 2');
swal.clickConfirm();
});
$('#ShowBtn').click(function(){
swal({
title: 'Title',
html: "Some Text" +
"<br>" +
'<button type="button" role="button" tabindex="0" class="SwalBtn1 customSwalBtn">' + 'Button1' + '</button>' +
'<button type="button" role="button" tabindex="0" class="SwalBtn2 customSwalBtn">' + 'Button2' + '</button>',
showCancelButton: false,
showConfirmButton: false
});
});.customSwalBtn{
background-color: rgba(214,130,47,1.00);
border-left-color: rgba(214,130,47,1.00);
border-right-color: rgba(214,130,47,1.00);
border: 0;
border-radius: 3px;
box-shadow: none;
color: #fff;
cursor: pointer;
font-size: 17px;
font-weight: 500;
margin: 30px 5px 0px 5px;
padding: 10px 32px;
}<link href="https://cdn.jsdelivr.net/sweetalert2/4.2.4/sweetalert2.min.css" rel="stylesheet"/>
<script src="https://cdn.jsdelivr.net/sweetalert2/4.2.4/sweetalert2.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="ShowBtn" class="customSwalBtn">Alert</button>回答by N'Bayramberdiyev
I once needed to add the third button to SweetAlert2popup. The simplest way in my case was to use footerwhich can be either plain text or HTML:
我曾经需要将第三个按钮添加到SweetAlert2弹出窗口。就我而言，最简单的方法是使用footer它可以是纯文本或 HTML：
$(function() {
$('.btn').click(function(e) {
e.preventDefault();
Swal.fire({
icon: 'warning',
title: 'Are you sure?',
text: 'You won\'t be able to revert this!',
showCloseButton: true,
showCancelButton: true,
footer: '<a href="#!" id="some-action">Some action</a>'
}).then((result) => {
console.log(result);
});
});
$(document).on('click', '#some-action', function(e) {
e.preventDefault();
console.log('Some action triggered.');
});
});<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@9"></script>
<div class="text-center">
<button type="button" class="btn btn-primary my-3">Click me</button>
</div>回答by KW402
Richard Cook remarked above that the original answer (provided by Konstantin Azizov) stopped working with version 4.2.6 of SweetAlert2. He suggested this had to do with nodes being cloned as they are added to the html. I don't know SweetAlert2 well enough to say whether he was right or not. I could see, though, that my buttons got added but the onclick callback functions never got called.
理查德库克在上面评论说最初的答案（由 Konstantin Azizov 提供）停止使用 SweetAlert2 的 4.2.6 版。他建议这与在将节点添加到 html 时被克隆的节点有关。我不太了解 SweetAlert2 来判断他是否正确。不过，我可以看到，我的按钮被添加了，但 onclick 回调函数从未被调用。
With a little effort, I was able to get this to work with the current release of SweetAlert2. To make it work I had to assign the onclick events to the buttons at a later point. I ended up adding ids to the buttons, making them easy to select from jQuery. Then I added on onOpen function to my swal object and in there, connected the logic to associate the callback functions. Below is a snippet of the code that works for me.
稍加努力，我就能够使其与当前版本的 SweetAlert2 配合使用。为了使它工作，我必须稍后将 onclick 事件分配给按钮。我最终为按钮添加了 id，使它们易于从 jQuery 中选择。然后我将 onOpen 函数添加到我的 swal 对象中，并在那里连接逻辑以关联回调函数。下面是对我有用的代码片段。
Also note that the message and buttons use some existing SweetAlert2 classes so they do have the same look as the existing UI elements. A word of caution, I did try using the swal2-confirm and swal2-cancel classes. When I did that I ran into some issues. It may be that SweetAlert2 code is dependent on there only being a single element that uses that class. I didn't have time to chase it down so I just stopped using those classes.
另请注意，消息和按钮使用一些现有的 SweetAlert2 类，因此它们与现有的 UI 元素具有相同的外观。提醒一下，我确实尝试使用 swal2-confirm 和 swal2-cancel 类。当我这样做时，我遇到了一些问题。可能是 SweetAlert2 代码依赖于只有一个使用该类的元素。我没有时间去追它，所以我只是停止使用这些类。
function createButton(text, id) {
return $('<button class="swal2-input swal2-styled" id="'+id+'">'+text+'</button>');
}
function createMessage(text) {
return $('<div class="swal2-content" style="display: block;">'+text+'</div>');
}
function swThreeButton(msg, textOne, textTwo, textThree, callbackOne, callbackTwo, callbackThree) {
var buttonsPlus = $('<div>')
.append(createMessage(msg))
.append(createButton(textOne,'sw_butt1'))
.append(createButton(textTwo,'sw_butt2'))
.append(createButton(textThree,'sw_butt3'));
swal({
title: 'Select Option',
html: buttonsPlus,
type: 'question',
showCancelButton: false,
showConfirmButton: false,
animation: false,
customClass: "animated zoomIn",
onOpen: function (dObj) {
$('#sw_butt1').on('click',function () {
swal.close();
callbackOne();
});
$('#sw_butt2').on('click',function () {
swal.close();
callbackTwo();
});
$('#sw_butt3').on('click',function () {
swal.close();
callbackThree();
});
}
});
};
