33、Flask實戰第33天：sweetalert提示框
阿新 • • 發佈：2018-08-08
分享圖片 ucc tco 輸入框 要素 err tom lap ESS 
這節我們繼續優化，接收到返回值，我們在前端做一些處理，如:密碼修改成功，彈出一個成功的提示框。這個提示框我們采用sweetalert
其中xtalert.js是對上面兩個文件的一個封裝，使得我們用sweetalert變得更簡單，需要素材的同學點擊右側的二維碼打賞10元，截圖發送到郵箱[email protected]吧，之前打賞過本論壇實戰的就不用再打賞了哈！
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <sweetalert提示框使用demolink rel="stylesheet" href="sweetalert/sweetalert.css"> <script src="sweetalert/sweetalert.min.js"></script> <script src="sweetalert/xtalert.js"></script> <style> button{ display: block; margin-bottom: 10px; } </style> </head> <body> <button onclick="xtalert.alertError(‘不能刪除文章！‘)">錯誤提示</button> <button onclick="xtalert.alertInfo(‘您沒有權限，請聯系管理員！‘)">信息提示</button> <button onclick="xtalert.alertSuccess(‘恭喜您！操作成功！‘)">成功提示</button> <button id=‘confirm-btn‘>確認提示</button> <script> var confirmBtn = document.getElementById(‘confirm-btn‘); confirmBtn.onclick = function(event){ xtalert.alertConfirm({ ‘msg‘: ‘恭喜！文章發表成功！是否再發一篇？‘, ‘confirmText‘: ‘再發一篇‘, ‘cancelText‘: ‘回到首頁‘, ‘confirmCallback‘: function(){ alert(‘點擊了確認按鈕‘); }, ‘cancelCallback‘: function(){ alert(‘點擊了取消按鈕‘); } }); } </script> <button id=‘input-btn‘>輸入框提示</button> <script> var inputBtn = document.getElementById(‘input-btn‘); inputBtn.onclick = function(event){ xtalert.alertOneInput({ ‘text‘: ‘請輸入板塊名稱‘, ‘confirmCallback‘: function(text){ alert(text); xtalert.close(); } }); } </script> <button onclick="xtalert.alertNetworkError()">網絡錯誤</button> <button onclick="xtalert.alertInfoToast(‘權限受限，請聯系管理員！‘)">信息toast</button> <button onclick="xtalert.alertErrorToast(‘權限受限，請聯系管理員！‘)">錯誤toast</button> <button onclick="xtalert.alertSuccessToast(‘恭喜！操作成功！‘)">成功toast</button> </body> </html>
33、Flask實戰第33天：sweetalert提示框