项目中Sweetalert弹窗自动关闭问题求助

问题原因 #

你的弹窗会自动关闭，是因为代码里设置了timer: 5000参数，这个参数会让弹窗在5秒后自动关闭。另外，删除按钮的<a>标签使用空href=""，点击后会触发页面刷新，也可能导致弹窗提前消失。

解决步骤 #

1. 移除自动关闭配置
   删掉SweetAlert配置里的timer: 5000这一行，弹窗就不会自动关闭，直到用户点击按钮。

2. 修复按钮跳转问题
   将<a>标签的空href=""改为href="javascript:void(0)"，或者在onclick事件末尾加return false，阻止页面默认跳转行为，保证弹窗交互正常完成。

修改后的完整代码 #

JavaScript部分

<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
<script>
function deleteContact(cid){
    swal({
        title: "确定要删除吗？",
        text: "您确定要删除这个联系人吗？",
        icon: "warning",
        buttons: true,
        dangerMode: true
    })
    .then((willDelete) => {
        if (willDelete) {
            window.location="/user/delete/"+cid;
        } else {
            swal("您的联系人已保留！");
        }
    });
}   
</script>

删除按钮部分（二选一即可）

方法一：修改href属性

<a href="javascript:void(0)" th:onclick="|deleteContact(${c.cId})|">
    <i class="fa-solid fa-trash text-danger" title="删除"></i>
</a>

方法二：添加return false阻止跳转

<a href="" th:onclick="|deleteContact(${c.cId}); return false;">
    <i class="fa-solid fa-trash text-danger" title="删除"></i>
</a>

内容的提问来源于stack exchange，提问作者Vishal Srivastava