.NET Core项目中SweetAlert无法在模态层正常弹出问题

看起来你遇到的问题是SweetAlert的样式没有正确加载导致的——这是使用SweetAlert时非常常见的一个坑，很多人会只引入JS文件却忘了配套的CSS，直接导致弹窗布局错乱、没有模态遮罩层，最终出现你描述的“显示在屏幕左下角且处于所有元素下方”的情况。

下面是具体的解决步骤：

1. 必须引入SweetAlert的CSS文件 #

SweetAlert的弹窗样式、模态遮罩层、层级控制全部依赖它的CSS文件，只加JS是完全不够的。你需要在页面中先引入CSS，再引入JS：

<!-- 引入SweetAlert的样式文件 -->
<link rel="stylesheet" href="~/lib/sweetalert/dist/sweetalert.css" />
<!-- 引入SweetAlert的脚本文件 -->
<script src="~/lib/sweetalert/dist/sweetalert.min.js"></script>

注意要确保CSS文件的路径和你项目中文件的实际位置一致，如果是用LibMan安装的SweetAlert，这个路径通常是正确的；如果是手动下载的，要确认文件放在wwwroot/lib/sweetalert/dist/目录下。

2. 确保JS与CSS版本匹配 #

如果你的JS和CSS版本不一致，也可能出现样式兼容问题。尽量保证两者是同一版本的文件，比如用了sweetalert.min.js，就对应使用同版本的sweetalert.min.css（或者未压缩的sweetalert.css）。

3. 验证修改后的代码 #

把CSS引入添加到你的代码中后，完整的代码应该是这样的：

@RenderBody()
<button id="testbutton">TEST</button>

<!-- 先引入SweetAlert样式 -->
<link rel="stylesheet" href="~/lib/sweetalert/dist/sweetalert.css" />
<!-- 再引入SweetAlert脚本 -->
<script src="~/lib/sweetalert/dist/sweetalert.min.js"></script>

<script>
var SweetAlert = function () { };
//examples
SweetAlert.prototype.init = function () {
    //Parameter
    $('#testbutton').on('click', function (e) {
        swal({
            title: "Are you sure?",
            text: "You will not be able to recover this imaginary file!",
            type: "warning",
            showCancelButton: true,
            confirmButtonColor: "#f0c541",
            confirmButtonText: "Yes, delete it!",
            cancelButtonText: "No, cancel plx!",
            closeOnConfirm: false,
            closeOnCancel: false
        }, function (isConfirm) {
            if (isConfirm) {
                swal("Deleted!", "Your imaginary file has been deleted.", "success");
            } else {
                swal("Cancelled", "Your imaginary file is safe :)", "error");
            }
        });
        return false;
    });
}
$.SweetAlert = new SweetAlert, $.SweetAlert.Constructor = SweetAlert;
$.SweetAlert.init();
</script>

完成以上修改后，再点击测试按钮，SweetAlert应该就能正常以模态框的形式居中显示，并且有遮罩层覆盖在其他元素上方了。

内容的提问来源于stack exchange，提问作者A. Hasemeyer