项目中使用了 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 })
声明:本站所有文章,如无特殊说明或标注,均为本站原创发布。任何个人或组织,在未征得本站同意时,禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益,可联系我们进行处理。