發現ZUI有一個漂浮消息的控件，直接替換掉登錄界面的alert用：

官網網址在這里：http://zui.sexy/#javascript/messager

效果

我沒開服務器，所以在中間彈窗出鏈接失敗，600ms后消失

?

代碼

function login(){var name = $("#username").val();var password= $("#password").val();$.ajax({data:{"username":name,"password":password},url:" http://localhost:5000/login",async:false,dataType:'json',crossDomain: true,success:function(data){if (data.code==0){new $.zui.Messager('登錄成功', {type: 'success', // 定義顏色主題icon:'check-circle-o',time: 600 //600ms延遲}).show();document.location = "main.html";}else{new $.zui.Messager('用戶名或密碼輸入錯誤', {type: 'danger', // 定義顏色主題time: 600,//600ms延遲placement: 'center',//顯示在中間close:false,//去除關閉按鈕icon:'warning-sign'//警告標志}).show();};},error:function(XMLHttpRequest, textStatus, errorThrown) {new $.zui.Messager('服務器連接失敗', {type: 'danger', // 定義顏色主題time: 600,//600ms延遲placement: 'center',//顯示在中間close:false,//去除關閉按鈕icon:'warning-sign'//警告標志}).show();}});}

?

?

?

?

?

?

?

?

?

?

?

?

?

?

?

總結

以上是生活随笔為你收集整理的Flask+ZUI 开发小型工具网站 3.1 ——ZUI漂浮消息的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。