JavaScript重定向阻止IE上的CSS疊加

我正在構建PayPal Express Checkout頁面;不幸的是PayPal花了這麼長時間來加載重定向，我不得不設計一個頁面重疊顯示幾秒鐘。該序列在FF和Chrome上運行，但IE瀏覽器扼殺它。提供：當我首先調用SetOverlay（）時，重定向從不發生 - 在任何瀏覽器上都不會發生。奇。所以很自然地，我在設置覆蓋之前將它換成了重定向。JavaScript重定向阻止IE上的CSS疊加

我在IE上的所有功能都是禁用按鈕，僅此而已。如果我註釋掉重定向，則覆蓋圖按預期顯示。

有沒有人有任何想法或知道黑客得到這個工作在IE瀏覽器？謝謝。

這裏的服務器端代碼：

sOverlay = File.ReadAllText(Server.MapPath("~/Scripts/Overlay.js")) 

Me.Page.Header.Controls.Add(New LiteralControl("<script src=""Scripts/jquery-2.1.1.js""></script>")) 
Me.Page.ClientScript.RegisterClientScriptBlock(Me.GetType, "Overlay", sOverlay, True) 
Me.Page.ClientScript.RegisterStartupScript(Me.GetType, "Redirect", "window.location.replace('{0}');".ToFormat(.GetRedirectUrl(sToken)), True) 
Me.Page.ClientScript.RegisterStartupScript(Me.GetType, "SetOverlay", "SetOverlay();", True)

然後在客戶端代碼：

$(function SetOverlay() { 
    var docHeight = $(document).height(); 

    $("body").append("<div id='overlay'></div>"); 
    $("body").append("<div class='heavy blue' id='box'>Transferring to PayPal...</div>"); 

    $("#overlay") 
    .height(docHeight) 
    .css({ 
     'background-color': 'black', 
     'position': 'absolute', 
     'opacity': 0.3, 
     'z-index': 4999, 
     'cursor': 'wait', 
     'width': '100%', 
     'left': 0, 
     'top': 0 
    }); 

    $("#box") 
    .css({ 
     'background-color': 'white', 
     'text-align': 'center', 
     'margin-left': '-150px', 
     'position': 'absolute', 
     'padding': '20px', 
     'z-index': 5000, 
     'border': 'solid 1px #4088b8', 
     'cursor': 'wait', 
     'width': '300px', 
     'left': '50%', 
     'top': '40%', 
     'box-shadow': '0 0 4px 2px gray' 
    }) 
});

來源

2014-08-29 InteXX

可能與事件隊列阻塞有關。你可以嘗試在超時中包裝你的重定向：'setTimeout（function（）{window.location.replace（'{0}'）;}，50）' – 2014-08-29 05:44:30

有趣的事情，那。在預感上，我正準備嘗試一下。但後來我想到了原來的答案：跳過JQuery並改用POCSS。詳情請參閱我的回答。 – InteXX 2014-08-29 06:14:42

OK，我找到了竅門。我最終完全跳過了JQuery並使用純CSS解決方案。

工程很好。（如果其他人碰到相同的凹凸部分，希望保留此問題）。

以下是代碼。

.ASCX：

<asp:Panel ID="pnlOverlay" runat="server" Visible="False" CssClass="Overlay"></asp:Panel> 
<asp:Panel ID="pnlCaption" runat="server" Visible="False" CssClass="heavy blue Caption">Transferring to PayPal...</asp:Panel>

代碼背後：

Me.Page.ClientScript.RegisterStartupScript(Me.GetType, "Redirect", "window.location.replace('{0}');".ToFormat(.GetRedirectUrl(sToken)), True) 
Me.Page.Header.Controls.Add(New Controls.Styler("Overlay")) 

pnlOverlay.Visible = True 
pnlCaption.Visible = True

CSS：

div.Overlay { 
    background-color: black; 
    position: absolute; 
    opacity: 0.3; 
    z-index: 4999; 
    cursor: wait; 
    height: 100%; 
    width: 100%; 
    left: 0; 
    top: 0; 
} 

div.Caption { 
    background-color: white; 
    text-align: center; 
    margin-left: -150px; 
    position: absolute; 
    padding: 20px; 
    z-index: 5000; 
    border: solid 1px #4088b8; 
    cursor: wait; 
    width: 300px; 
    left: 50%; 
    top: 40%; 
    box-shadow: 0 0 4px 2px gray; 
}

斯泰勒類：

Public Class Styler 
    Inherits LiteralControl 

    Public Sub New(FileName As String) 
    Dim _ 
     sFileName, 
     sStyles As String 

    sFileName = Path.GetFileNameWithoutExtension(FileName) 
    sStyles = File.ReadAllText(HttpContext.Current.Server.MapPath("~/Styles/{0}.css".ToFormat(sFileName))) 

    Me.Text = "{0}<style type=""text/css"">{0}{1}</style>{0}".ToFormat(vbCrLf, sStyles) 
    End Sub 
End Class

來源

2014-08-29 06:13:58 InteXX

JavaScript重定向阻止IE上的CSS疊加

回答

相關問題