前端的一些關於彈窗的問題

這兩天在開發的時候遇到了一個問題,產品部的需求是如下這樣的:

點擊提交後會做判斷,如果滿足某個條件,則彈出如上彈窗。在彈窗中點擊關閉後,不再執行函數中其餘代碼;點擊仍要提交,執行其餘代碼。

js的confirm方法實現這個就比較容易了,該函數會彈出彈窗,當點擊彈窗按鈕後會返回點擊的是“確定”-true還是“取消”-false,可以根據這個狀態來判斷是直接返回還是繼續執行其他代碼。可是confirm的一個缺陷就是它的樣式啊什麼的包括按鈕的文字都是固定的,如果想使用其他的就需要對函數進行重寫(嘗試過,嫌麻煩就沒有繼續了)

放棄了重寫後,就開始想着使用其他的方式了,最先想到的是使用miniUI自帶的彈窗工具(我們的系統使用的miniUI作爲前端框架),使用它的mini.showMessageBox(options)其中option參數長這個樣

{
    title: String,    
    message: String,
    buttons: ["ok", "no", "cancel"],    
    iconCls: "mini-messagebox-question",
    html: String,   
    callback: function(action){
    }
}

。這個方法很棒,可是又有了新的問題,它的返回值是一個亂七八糟的messageId,貌似沒有一點用,不能判斷是該繼續執行還是終止其餘代碼。而且更可惡的是,程序在執行這個的同時,也把剩餘的代碼給執行了,也就是說彈出彈窗後不等用戶選擇直接執行其餘代碼。那麼自然是不行了。

後來就想着自己寫個彈窗,以爲會完美,可也是和這個一樣的問題。

再後來就跟產品部解釋了一番,取消使用“關閉”與“仍要提交”。使用confirm的“取消”和“確定”。

後來又嘗試了一下,發現miniUI的mini.confirm也不行,也是不會暫時停住程序的執行

歸根到底,還是自己是做後端的,所以在做前端的一些東西纔會卡住。

發佈了53 篇原創文章 · 獲贊 50 · 訪問量 6萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章