Question

我正在使用最新版本的sweetalert sweetalert2，如何在模特中调用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-index CSS属性有关。

默认情况下，SweetAlert2的容器有z-index: 1060。为了增加它，你需要在CSS样式中使用这样的东西：

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

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

Answer 2

这对我有帮助：

::ng-deep.swal2-container {
    z-index: 1000000;
}

Answer 3

解决方案是使用z-index将甜蜜警报模式置于最上方。

.swal-overlay  
{
    z-index: 100000000000; !important    
}

只需检查模式的z-index，然后将.sweet-overlay z-index属性设置为大于模式值。

Answer 4

如果仍然有此问题，请尝试使用此代码段。这解决了我的问题。

:host   ::ng-deep .swal2-container {
    z-index: 300000 !important;}

如何在模态中使用sweetalert2？

4 个答案: