w3h5

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

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

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

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

Sweet Alert弹窗点击确定后执行页面跳转等操作 HTML笔记 第1张

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

Sweet Alert弹窗点击确定后执行页面跳转等操作 HTML笔记 第2张

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

.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 对象。

声明:本文由w3h5原创,转载请注明出处:《Sweet Alert弹窗点击确定后执行页面跳转等操作》 https://www.w3h5.com/post/395.html

赞 (2)
分享到: +More |

评论 沙发

换个身份