前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >button按钮Sweet Alert弹窗一闪自动消失的踩坑实录

button按钮Sweet Alert弹窗一闪自动消失的踩坑实录

作者头像
德顺
发布2019-11-12 23:24:46
发布2019-11-12 23:24:46
3.6K00
代码可运行
举报
文章被收录于专栏:前端资源前端资源
运行总次数:0
代码可运行

项目中使用了 Sweet Alert 插件,今天在一个页面中发现了问题,点击提交按钮,正常应该弹窗,然后点击按钮跳转页面的。

但是点击 button 按钮,Sweet Alert 弹窗闪了一下就消失了,也不能正常跳转页面,很是奇怪,找了半天,也没发现问题。

js 代码:

代码语言:javascript
代码运行次数:0
运行
复制
swal({
        title:"修改成功!",
        text: "请使用新密码登陆。",
        type: "success",
        confirmButtonText: "重新登陆",
    }).then(function () {
        window.location.href = "/login.html"
    })

解决流程:

首先找到的解决方法是添加定时器,普通的 swal() 显示后,需要自动刷新页面,有时候会出现 window.location.reload() 自动刷新掉 swal() 的情况,导致没有按 swal() 的确定按钮,就自动刷新页面),设置双定时器可以解决。

代码语言:javascript
代码运行次数:0
运行
复制
setTimeout(
    function(){
        swal("提示","操作成功","success"); 
    },100);
setTimeout(function(){window.location.reload(); },2000);

不过问题并不是处在这,最终发现是 button 按钮的问题

button 按钮需要有 type 属性,swal() 才能更好地执行。

代码语言:javascript
代码运行次数:0
运行
复制
<button class="btn" id="submit">提交<button> // 原来的
<button class="btn" id="submit" type="button">提交<button> // 修改后

这么,问题就解决了。。。

Sweet Alert 加载弹窗定时自动关闭:

文档里面有一个 timer 属性:定时关闭弹窗的计时器,单位为ms(毫秒)。

代码语言:javascript
代码运行次数:0
运行
复制
swal({
    title: "正在查询中!",
    showConfirmButton: false,
    showCancelButton: false,
    timer:2000
})

我前段时间写的 Sweet Alert 的使用方法:Sweet Alert弹窗插件的安装及使用详解笔记

声明:本文由w3h5原创,转载请注明出处:《button按钮Sweet Alert弹窗一闪自动消失的踩坑实录》

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 解决流程:
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档