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;
}

样式类:

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