您好,登錄后才能下訂單哦!
昨天layer插件彈出層關閉問題弄的我直撓頭,短短幾行代碼,用了我將近2個鐘頭才解決。我的使用場景是這樣。在頁面中用layer.open彈出一個層,在層內是微信支付二維碼,客戶掃碼支付。支付成功后關閉此彈出層,并提示項目投遞成功,然后再跳轉到其他頁面。為了監控微信二維碼掃碼支付是否成功。我利用了每隔三秒,查詢下支付訂單,查看支付訂單的支付狀態是否改變。在實際操作中由于使用的是location.href做跳轉,然而跳轉執行的非常慢,要10幾秒才能成功,這不能忍。只能退而求其次,只是提示投遞成功,然后關閉彈出層。由于關閉彈出層,及彈出警告提示的相關代碼是在彈出層所在頁面執行。
實際代碼在執行過程當中遇到了各種問題。
$(function () { setInterval(GetDeliverProjectPayStatusSuccess, 3000); }); function GetDeliverProjectPayStatusSuccess() { $.post("/ajax/GetDeliverProjectPayStatus.ashx", { OrderNo:"<%=Request.QueryString["OrderNo"] %>" }, function (data) { console.info(data); if (data == 1) { parent.layer.closeAll(); layer.alert("項目投遞成功"); } }); }
首先嘗試的代碼如上。先關閉彈出層,然后提示項目投遞成功。這嘗試的結果是,彈出層被關閉了。卻沒有任何提示。為什么這樣執行,分析的結果是關閉彈出層,意味著彈出頁面被關閉。彈出頁面被關閉了。在彈出頁面存在的layer.alert代碼也就無從執行。然后這兩行代碼調換位置。可仍然是彈出層被關閉了。卻沒有提示。這個分析的原因是就像javascript中的alert與location.href一樣。如果先alert然后在location.href,也不會執行alert,或者說其實有執行,但是由于系統執行的非常快,還沒等你看到alert信息,瀏覽器已經跳轉了。這里也是,還沒等你看到項目投遞成功的信息,彈出層已經關閉了。
又嘗試了帶回調函數的layer.alert,等客戶點擊layer.alert的確定按鈕后再執行parent.layer.closeAll() 來關閉彈出層。然而殘酷的現實是,由于這個是每隔三秒執行一次post請求,結果就是如果你點擊關閉按鈕過慢,它會每隔3秒彈出項目投遞成功的提示。這怎么能用。難道你要求客戶必須快速反應,點擊關閉按鈕?經過不斷嘗試,最終還是找到了一個方法解決了這個問題。
能夠很好解決此問題的代碼如下:
$(function () { setInterval(GetDeliverProjectPayStatusSuccess, 3000); }); function GetDeliverProjectPayStatusSuccess() { $.post("/ajax/GetDeliverProjectPayStatus.ashx", { OrderNo:"<%=Request.QueryString["OrderNo"] %>" }, function (data) { console.info(data); if (data == 1) { parent.layer.alert("項目投遞成功"); var index = parent.layer.getFrameIndex(window.name); //先得到當前iframe層的索引 parent.layer.close(index); //再執行關閉 } }); }
以上這篇layer插件實現在彈出層中彈出一警告提示并關閉彈出層的方法就是小編分享給大家的全部內容了,希望能給大家一個參考,也希望大家多多支持億速云。
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。