Question

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

$(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 self（关键字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' },之后添加confirm: 'Yes'，则cancel: 'No'按钮将返回到右侧。

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

Answer 2

您现在可以简单地添加reverseButtons参数，将其设置为true即可交换按钮。

swal({
        title: "Emin misiniz?",
        text: "Yorumunuzu gönderiyoruz",
        type: "warning",
        showCancelButton: true,
        confirmButtonText: "EVET",
        cancelButtonText: "HAYIR",
        closeOnConfirm: false,
        closeOnCancel: false,
        reverseButtons: true
    },

Answer 3

对于那些仍在使用旧版本的人，这里有一个 CSS 的解决方法。

   .sa-button-container {
      display: flex; 
      flex-direction: row-reverse; 
      text-align: center; 
      justify-content: center;
   }
   .sa-button-container .cancel {
      margin-left: 10px;
   }

（包括JSFIDDLE）甜蜜警报js - 按钮交换（左侧确认按钮，右侧取消按钮）

3 个答案: