如何在模态中使用 sweetalert2？答案

【问题标题】：How to use sweetalert2 inside modal?如何在模态中使用 sweetalert2？
【发布时间】：2017-07-12 16:13:12
【问题描述】：

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

        }
    });
    })

【问题讨论】：

标签： jquery bootstrap-modal sweetalert sweetalert2

【解决方案1】：

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

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

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

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

【讨论】：

有没有办法让模型本身变灰？即使z-index 更多，模型本身看起来也一样。我想让模型作为 sweetalert 的基础
在我的例子中， div.swal2-container { z-index: {x}; } 解决了这个问题。

【解决方案2】：

这对我有帮助：

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

【讨论】：

【解决方案3】：

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

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

只需检查模态的z-index 并将.sweet-overlay z-index 属性设置为大于模态值。

【讨论】：

【解决方案4】：

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

我刚刚完成了这个

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

【讨论】：

【解决方案5】：

如果有人仍然有这个问题，请尝试使用这个 sn-p。这解决了我的问题。

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

【讨论】：

【解决方案6】：

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

public/style.css

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

public/index.html

<link rel="stylesheet" href="%PUBLIC_URL%/style.css" />

【讨论】：