3

我正在使用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) {

        }
    });
    })
4

6 回答 6

10

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

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

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

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

于 2017-07-12T17:24:54.653 回答
1

解决方案是使用z-index.

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

只需检查z-indexmodal 并将.sweet-overlay z-index属性设置为超过 modals 值。

于 2020-08-20T13:05:02.607 回答
1

您只需要增加 z-index of sweet alert，因此您可以使用与使用Css完全相同的名称全局添加类swal

我刚做完这个

.swal2-container {
  z-index: 20000 !important;
}
于 2021-12-11T09:06:59.030 回答
1

这帮助了我：

::ng-deep.swal2-container {
    z-index: 1000000;
}
于 2020-01-28T22:27:33.117 回答
0

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

:host   ::ng-deep .swal2-container {
    z-index: 300000 !important;}
于 2020-12-17T10:13:16.393 回答
0

它在我的ReactJs项目中为我工作

公共/style.css

  .swal2-container.swal2-backdrop-show, .swal2-container.swal2-noanimation {
  
  z-index: 11000;
}

公共/index.html

<link rel="stylesheet" href="%PUBLIC_URL%/style.css" />
于 2021-12-25T14:43:11.263 回答