昨天layer插件彈出層關閉問題弄的我直撓頭，短短幾行代碼，用了我將近2個鐘頭才解決。我的使用場景是這樣。在頁面中用layer.open彈出一個層，在層內是微信支付二維碼，客戶掃碼支付。支付成功后關閉此彈出層，并提示項目投遞成功，然后再跳轉到其他頁面。為了監(jiān)控微信二維碼掃碼支付是否成功。我利用了每隔三秒，查詢下支付訂單，查看支付訂單的支付狀態(tài)是否改變。在實際操作中由于使用的是location.href做跳轉，然而跳轉執(zhí)行的非常慢，要10幾秒才能成功，這不能忍。只能退而求其次，只是提示投遞成功，然后關閉彈出層。由于關閉彈出層，及彈出警告提示的相關代碼是在彈出層所在頁面執(zhí)行。

實際代碼在執(zhí)行過程當中遇到了各種問題。

$(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("項目投遞成功");
 
        }
      });
    }

首先嘗試的代碼如上。先關閉彈出層，然后提示項目投遞成功。這嘗試的結果是，彈出層被關閉了。卻沒有任何提示。為什么這樣執(zhí)行，分析的結果是關閉彈出層，意味著彈出頁面被關閉。彈出頁面被關閉了。在彈出頁面存在的layer.alert代碼也就無從執(zhí)行。然后這兩行代碼調換位置?？扇匀皇菑棾鰧颖魂P閉了。卻沒有提示。這個分析的原因是就像javascript中的alert與location.href一樣。如果先alert然后在location.href，也不會執(zhí)行alert，或者說其實有執(zhí)行，但是由于系統(tǒng)執(zhí)行的非?？欤€沒等你看到alert信息，瀏覽器已經(jīng)跳轉了。這里也是，還沒等你看到項目投遞成功的信息，彈出層已經(jīng)關閉了。

又嘗試了帶回調函數(shù)的layer.alert，等客戶點擊layer.alert的確定按鈕后再執(zhí)行parent.layer.closeAll() 來關閉彈出層。然而殘酷的現(xiàn)實是，由于這個是每隔三秒執(zhí)行一次post請求，結果就是如果你點擊關閉按鈕過慢，它會每隔3秒彈出項目投遞成功的提示。這怎么能用。難道你要求客戶必須快速反應，點擊關閉按鈕？經(jīng)過不斷嘗試，最終還是找到了一個方法解決了這個問題。

能夠很好解決此問題的代碼如下：

  $(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); //再執(zhí)行關閉 
 
        }
      });
    }

以上這篇layer插件實現(xiàn)在彈出層中彈出一警告提示并關閉彈出層的方法就是小編分享給大家的全部內容了，希望能給大家一個參考，也希望大家多多支持腳本之家。

最新評論