button按鈕Sweet Alert彈窗一閃自動消失的踩坑實錄

• 2019 年 11 月 13 日
• 筆記

項目中使用了 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彈窗一閃自動消失的踩坑實錄》