JavaScript重定向阻止IE上的CSS覆盖

Question

我正在构建一个PayPal Express Checkout页面；不幸的是，PayPal在重定向时加载的时间太长了，以至于我不得不设计一个页面覆盖来显示这几秒钟。该序列适用于FF和Chrome，但遗憾的是IE被它卡住了

仅供参考：当我第一次调用SetOverlay（）时，重定向永远不会发生——在任何浏览器上。古怪的所以我很自然地在设置覆盖之前把它换成了重定向。

我在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'
    })
});

Answer 1

好吧，我找到了窍门。我最终完全跳过了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;
}

Styler类别：

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