专栏首页前端资源button按钮Sweet Alert弹窗一闪自动消失的踩坑实录

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

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

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

js 代码:

swal({
        title:"修改成功!",
        text: "请使用新密码登陆。",
        type: "success",
        confirmButtonText: "重新登陆",
    }).then(function () {
        window.location.href = "/login.html"
    })

解决流程:

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

setTimeout(
    function(){
        swal("提示","操作成功","success"); 
    },100);
setTimeout(function(){window.location.reload(); },2000);

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

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

<button class="btn" id="submit">提交<button> // 原来的
<button class="btn" id="submit" type="button">提交<button> // 修改后

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

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

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

swal({
    title: "正在查询中!",
    showConfirmButton: false,
    showCancelButton: false,
    timer:2000
})

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

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

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

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Sweet Alert弹窗插件的安装及使用详解笔记

    Sweet Alert 是一个替代传统的 JavaScript Alert 的“美化版”提示效果。SweetAlert 自动居中对齐在页面中央,不管是台式电脑,...

    德顺
  • git仓库包含子仓库时,add报错的解决办法

    本文主要介绍在一个仓库内部克隆另外一个仓库,后续该如何进行管理。最近在尝试使用 Hexo 博客,在添加主题后使用 git 的 add 命令时报错。

    德顺
  • IE、Chrome、360浏览器设置开机自启动,自动全屏参数

    这就比较头大了,我只好把浏览器设置为默认,把网址放到开始菜单,每次开机会自动打开网址并调用浏览器打开。

    德顺
  • 听说过spring-data-jdbc么?来个最佳实践

    很多人知道Mybatis,知道Jpa,但对2019年新诞生的一门技术知之甚少。那就是:spring-data-jdbc。这个标题起的很普通,但是内容绝对是最新的...

    xjjdog
  • InnoDB数据页什么时候合并

    我们知道,当从InnoDB表删除数据时,相应的数据是先打上删除标签(deleted mark),而后再由purge线程执行清理工作。

    老叶茶馆
  • 投融资汇总 | 本周(2.11-2.24),京东物流获单笔25亿美元融资

    镁客网
  • Centos 新服务器配置

    1)编译安装 root 账号登陆后,依次执行以下命令: cd /tmp wget http://www.ohse.de/uwe/releases/lrzs...

    onety码生
  • Python爬虫获取豆瓣TOP250电影详情

    偶然间看到豆瓣电影的TOP250榜单,于是突发奇想写了这个爬虫脚本。将通过爬取豆瓣电影TOP250的榜单列表获取电影详情页的URL,然后再爬取电影详情页URL中...

    泰坦HW
  • Unity应用架构设计(10)——绕不开的协程和多线程(Part 1)

    在进入本章主题之前,我们必须要了解客户端应用程序都是单线程模型,即只有一个主线程(Main Thread),或者叫做UI线程,即所有的UI控件的创建和操作都是...

    用户1161731
  • 内部分享:这篇文章教你如何用神经网络破Flappy Bird记录

    AI科技评论按:本文作者杨浩,原文载于作者个人博客。 以下内容来源于一次部门内部的分享,主要针对 AI 初学者,介绍包括 CNN、Deep Q Network...

    AI科技评论

扫码关注云+社区

领取腾讯云代金券