专栏首页前端资源Sweet Alert弹窗点击确定后执行页面跳转等操作

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

上周整理了 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 对象。

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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • WebStorm 显示行号+自动换行+鼠标滚轮缩放设置

    如果用Vim编程,行号是非常必要的辅助。WebStorm默认是不显示行号的,没关系,显示行号非常的容易。

    德顺
  • 利用CSS变量实现炫酷的悬浮效果

    最近,我从 Grover网站 上发现以一个好玩儿的悬停动画,这个动画是将鼠标移动到订阅按钮上移动光标,会跟随光标实现相应的彩色渐变。

    德顺
  • 小程序弹框后禁止下面的内容滑动的方法

    只需要在禁止滑动的标签上添加一个 catchtouchmove="ture" 属性即可,代码如下:

    德顺
  • 修饰器模式

    https://zhongsp.gitbooks.io/typescript-handbook/doc/handbook/Decorators.html

    JS菌
  • Stata | 爬取企业景气指数与企业家信心指数

    之前看见有文章在稳健性检验部分,用企业景气指数和企业家信心指数代替 GDP 增长率作为宏观经济层面投资机会的替代变量(李凤羽和杨墨竹,2015)。所以想收集来看...

    PyStaData
  • 数据结构与算法-阻塞队列

    cwl_java
  • PHP实现随机发扑克牌

    砸漏
  • 30 分钟理解 CORB 是什么

    我当前的 chrome 版本是 v68,如果是 v66 或更低版本可能提示的警告信息略有不同。印象中只对 CORS 比较熟悉,CORB 是个什么鬼?好奇心迫使我...

    littlelyon
  • 【OCP最新题库解析(052)--题39】Which two can be backed up by using

    注:OCP-052最新题库完整详细解答版请联系小麦苗私聊。解题不易,请大家尊重原创。

    小麦苗DBA宝典
  • vue-router 导航(守卫)钩子

    路由的导航守卫顾名思义就是控制路主要用来通过跳转或取消的方式守卫导航。总的来说总共有三种,分别是:

    OECOM

扫码关注云+社区

领取腾讯云代金券