如何在模态内使用sweetalert2？

Question

我正在使用sweetalert2，最新版本的sweetalert，我如何在模型中调用sweetalert？警报出现但它实际上被模式阻止了，这是我得到的结果。

它实际上被模态挡住了，我能做些什么让它在前面？谢谢你！

        swal({
        title: "Are you sure?",

        type: "warning",
        confirmButtonText:"Yes",
        confirmButtonColor:"#18a689",
        cancelButtonText:"No",
        showCancelButton: true,
        showLoaderOnConfirm: true
    }).then( function () {
        $.ajax({
            url: [[@{/jobDetails/remove}]],
        type: "POST",
            data:{jobId:id,masterId:masterListId},
        success: function (result) {
            if (result=="success"){
                refreshJobDetails(masterListId)
                reWriteMainTable();
            }
        },
        error: function (thrownError) {

        }
    });
    })

Answer 1

我相信您的问题与z-indexCSS 属性有关。

SweetAlert2 的容器z-index: 1060默认有。为了增加它，您将需要在您的 CSS 样式中使用以下内容：

.swal2-container {
  z-index: {X};
}

哪里{X}是一个大于z-index另一个模态的数字，例如100000。

Answer 2

你只需要增加 的 z-index sweet alert，这样你就可以全局添加与使用Css完全相同的名称的类swal

我刚刚做完这个

.swal2-container {
  z-index: 20000 !important;
}