javascript - (包括 JSFIDDLE)sweet alert js - 按钮交换(确认按钮在左边，取消按钮在右边)

Question

我正在使用 sweet alert js ，我想把确认按钮换到左边，取消按钮换到右边。我尝试交换它，但是图像和动画没有以正确的方式实现。

JSFIDDLE

$(document).ready(function () {
    $('#comment-send').on('click',function () {
        swal({
            title: "Emin misiniz?",
            text: "Yorumunuzu gönderiyoruz",
            type: "warning",
            showCancelButton: true,
            confirmButtonText: "EVET",
            cancelButtonText: "HAYIR",
            closeOnConfirm: false,
            closeOnCancel: false
        },
        function (isConfirm) {
            if (isConfirm)
            {
                swal("Gönderildi!", "Yorumunuz gönderilmiştir!", "success");
            }
            else
            {
                swal("İptal edildi!", "Yorum gönderimi iptal edilmiştir!", "error");
            }
        });
    });
});

Answer 1

您使用的是非常旧版本的 sweetalert (0.4.2)。

除非您使用 CSS“破解”它，否则不可能反转该版本中的按钮。

您需要升级到最新的 sweetalert 版本 ( https://unpkg.com/sweetalert/dist/sweetalert.min.js )。

新版本不再需要 CSS 文件。它现在使用 JavaScript promise(关键字 then)来获取单击的按钮(无论他们单击“确定”还是“取消”)。

$(document).ready(function () {
    $('#comment-send').on('click',function () {
        swal({
            title: "Emin misiniz?",
            text: "Yorumunuzu gönderiyoruz",
            icon: "warning",
            buttons: {
                confirm: 'Yes',
                cancel: 'No'
            },
        }).then(function (isConfirm) {
            if (isConfirm)
            {
                swal("Gönderildi!", "Yorumunuz gönderilmiştir!", "success");
            }
            else
            {
                swal("İptal edildi!", "Yorum gönderimi iptal edilmiştir!", "error");
            }
        });
    });
});

看部分:

buttons: {
    confirm: 'Yes',
    cancel: 'No'
},

您可以在其中更改按钮的位置。如果在 cancel: 'No' 之后放置 confirm: 'Yes'，则 OK 按钮将回到右侧。

https://jsfiddle.net/6u7j73qb/12/