Sweet Alert弹窗点击确定后执行页面跳转等操作

德顺

发布于 2019-11-12 23:11:59

5.2K0

发布于 2019-11-12 23:11:59

文章被收录于专栏：前端资源

上周整理了 Sweet Alert弹窗插件的一些使用方法。

可不可以点击 Sweet Alert 弹窗的确定按钮后跳转页面呢？答案是可以的：

首先参考上文，引入 Sweet Alert 所需的文件，我这里写了一个修改密码的确认框。

点及修改后，会弹出修改成功提示，再点击重新登陆按钮，跳转登录页面。

添加一个页面跳转的代码就可以了。

.then(function () {
        window.location.href = "/login.html"
    })

代码如下：

swal({
    title: "您确定要修改密码吗",
    text: "修改后，请使用新密码登陆！",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "修改",
    cancelButtonText: "取消",
    closeOnConfirm: false
}).then(function () {
    swal({
        title:"修改成功！",
        text: "请使用新密码登陆。",
        type: "success",
        confirmButtonText: "重新登陆",
    }).then(function () {
        window.location.href = "/login.html"
    })
})

下面的代码也可以用，不过规范的话还是用上面的：

swal({
    title: "您确定要修改密码吗",
    text: "修改后，请使用新密码登陆！",
    type: "warning",
    showCancelButton: true,
    confirmButtonColor: "#DD6B55",
    confirmButtonText: "修改",
    cancelButtonText: "取消",
    closeOnConfirm: false
}, function () {
    swal({
        title:"修改成功！",
        text: "请使用新密码登陆。",
        type: "success",
        confirmButtonText: "重新登陆",
    }, function () {
        window.location.href = "/login.html"
    })
})

.then字面意思就是上一步执行完了，执行下一步，不过这是 Promise 对象的方法，非 Promise 对象没有 then 方法。在 jQuery 中 Promise 叫作 Deferred 对象。