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

推荐阅读:

HTML5新增的几个a标签属性 移动端

阿里巴巴矢量图标库 iconfont 的使用方法

https百度推送push.js报错的解决方法

QQ聊天插件,鼠标划入划出显示隐藏效果。

【笔记】5.2学习小程序用到的网站和资料

赞 (4)
分享到: +

评论 沙发

Avatar

换个身份

  • 昵称 (必填)
  • 邮箱 (选填)