我有一个带有2个按钮的sweetalert,但我想再添加一个按钮。 例如,截至目前,我有,我不想再添加一个按钮。请帮忙
$("#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' ?>"
});
});
提前致谢:)
答案 0 :(得分:14)
你应该使用带有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);
}
&#13;
<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>
&#13;
答案 1 :(得分:8)
上述答案对我不起作用,所以我做了以下事情:
$(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>
答案 2 :(得分:2)
我曾经需要将第三个按钮添加到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/popper.js@1.16.0/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>
答案 3 :(得分:1)
Richard Cook在上面指出,原始答案(由Konstantin Azizov提供)停止使用SweetAlert2的4.2.6版本。他建议,这与将节点添加到html中时被克隆的节点有关。我对SweetAlert2不太了解,无法说出他是否正确。不过,我可以看到我的按钮被添加了,但从未调用过onclick回调函数。
稍作努力,我就可以使它与当前版本的SweetAlert2一起使用。为了使其工作,我不得不在稍后将onclick事件分配给按钮。我最终在按钮上添加了id,从而使它们易于从jQuery中进行选择。然后,将onOpen函数添加到我的swal对象中,并在其中连接逻辑以关联回调函数。以下是对我有用的代码片段。
还要注意,消息和按钮使用一些现有的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();
});
}
});
};
答案 4 :(得分:1)
???我们最近发布了SweetAlert2 v10并支持第三个“拒绝”按钮:
Swal.fire({
title: 'Do you want to save the changes?',
showDenyButton: true,
showCancelButton: true,
confirmButtonText: `Save`,
denyButtonText: `Don't save`,
}).then((result) => {
/* Read more about isConfirmed, isDenied below */
if (result.isConfirmed) {
Swal.fire('Saved!', '', 'success')
} else if (result.isDenied) {
Swal.fire('Changes are not saved', '', 'info')
}
})
<script src="https://cdn.jsdelivr.net/npm/sweetalert2@10"></script>
阅读v10的发行说明:https://github.com/sweetalert2/sweetalert2/releases/v10.0.0
答案 5 :(得分:0)
对于sweetalert2
,这对我有用:(Run it live)
var onBtnClicked = (btnId) => {
Swal.close();
if (btnId != "cancel") Swal.fire("you choosed: " + btnId);
};
Swal.fire({
title: "What you want to do?",
icon: "warning",
showConfirmButton: false,
showCloseButton: true,
html: `
<p>select an action</p>
<div>
<button class="btn btn-primary" onclick="onBtnClicked('reply')">Reply</button>
<button class="btn btn-danger" onclick="onBtnClicked('delete')">Delete</button>
<button class="btn btn-secondary" onclick="onBtnClicked('cancel')">Cancel</button>
</div>`
});
答案 6 :(得分:0)
对于sweetalert2来说,这对我有用
$(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>
答案 7 :(得分:0)
现在使用 ES6 非常容易。
请参阅此处:如何添加无限按钮
createSwalButton = async () => {
let swalButton = await swal({
title: "Add Buttons?",
text: "This will create a new button.",
icon: "info",
buttons: {
buttonOne: {
text: "First",
value: "firstVal",
visible: true,
className: "swal-btn-cancel",
closeModal: true,
},
buttonTwo: {
text: "Second",
value: "secondVal",
visible: true,
className: "swal-btn-confirm",
closeModal: true
},
buttonThree: {
text: "Third",
value: "thirdVal",
visible: true,
className: "swal-btn-confirm",
closeModal: true
},
buttonFour: {
text: "Fourth",
value: "fourthVal",
visible: true,
className: "swal-btn-confirm",
closeModal: true
},
buttonFive: {
text: "Fifth",
value: "fifthVal",
visible: true,
className: "swal-btn-confirm",
closeModal: true
}
},
})
if (swalButton === "firstVal") {
//do stuff
}
}
好吧,我可能有点过分了,但你会看到它是如何工作的。
向 SWAL 团队大喊大叫!这是一款很棒的产品。