为什么我不能在 Microsoft Edge 中使用页面覆盖？

Question

我正在尝试使用 <div> 叠加层，但我无法使用 Microsoft Edge（Chromium 版本）从函数中调用叠加层。叠加层适用于 Firefox。

这是 link 到 fiddle 这将说明我的困境：https://jsfiddle.net/utd0z7qk/

首先，使用 Firefox 打开 link，然后单击“检查错误”按钮。您将看到一个 alert 框，其中显示消息“Check Point”。请注意，在后台您还会看到已调用叠加层并显示消息“正在加载...”。

接下来，使用 Microsoft Edge 打开相同的 link，然后单击“检查错误”按钮。同样，您会看到一个 alert 框，其中显示消息“检查点。但是，请注意尚未调用叠加层，并且后台没有消息。

为什么不呢？

我广泛使用 <div> 叠加层来进行消息传递，特别是当我预计来自远程源（例如数据库、Web 服务、REST API 等）的响应会出现明显延迟时).对于 Microsoft Edge 的这种行为，是否有合适的解决方法？

编辑以包含代码：

function errorCheck(elem) {
  var ovly = document.getElementById("overlaySpinner");
  var msg = document.getElementById("msgSpinner");
  msg.innerHtml = "CHECKING FOR ERRORS";
  ovly.style.display = "block";

  alert("Check Point");

  ovly.style.display = "none";
}

.overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,1.00); /* White background with opacity */
/*  background-color: white;
    opacity: 1.00; */
    z-index: 2;  /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
    overflow-y: auto;
}

<html>
  <head>
  <body>
    <center>
      <h5>Overlay Messaging Demo</h5>
      <br />
      <br />
      <button id="btnErrorCheck" style="width:30%;" onclick="errorCheck()">Check for Errors</button>
    </center>

    <!-- Spinner Overlay -->
    <div id="overlaySpinner" class="overlay" style="text-align:center;">
      <div class="text-center" style="height:65%"></div>
      <div class="text-center" style="height:5%">
        <div class="spinner-border text-primary" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
      <div class="text-center" style="height:5%; font-family:Arial; font-size:20px; font-weight:bold; text-align:center; margin-top:12px;">
        <span id="msgSpinner"></span>
      </div>
    </div>
  </body>
  </head>
</html>

非常感谢任何帮助。

Answer 1

我测试过 Google Chrome:

基本上，您需要给它时间来完成 reflow/redraw。

一个简单的setTimeout就足够测试了

像改变这个：

function errorCheck(elem) {
  var ovly = document.getElementById("overlaySpinner");
  var msg = document.getElementById("msgSpinner");
  msg.innerHtml = "CHECKING FOR ERRORS";
  ovly.style.display = "block";
  
  alert("Check Point");
  
  ovly.style.display = "none";
}

进入这个：

function errorCheck(elem) {
  var ovly = document.getElementById("overlaySpinner");
  var msg = document.getElementById("msgSpinner");
  msg.innerHtml = "CHECKING FOR ERRORS";
  ovly.style.display = "block";

  setTimeout(function(){
    alert("Check Point");
    
    ovly.style.display = "none";
  }, 2000);
}

并且“正在加载...”应该显示：

（顺便说一句，记住 Microsoft Edge 现在在 Blink 上运行，就像 Google Chrome）

您可以在下面的 StackSnippet 上试试这个：

function errorCheck(elem) {
  var ovly = document.getElementById("overlaySpinner");
  var msg = document.getElementById("msgSpinner");
  msg.innerHtml = "CHECKING FOR ERRORS";
  ovly.style.display = "block";

  setTimeout(function(){
    alert("Check Point");
    
    ovly.style.display = "none";
  }, 2000);
}

.overlay {
    position: fixed; /* Sit on top of the page content */
    display: none; /* Hidden by default */
    width: 100%; /* Full width (cover the whole page) */
    height: 100%; /* Full height (cover the whole page) */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(255,255,255,1.00); /* White background with opacity */
/*  background-color: white;
    opacity: 1.00; */
    z-index: 2;  /* Specify a stack order in case you're using a different order for other elements */
    cursor: pointer; /* Add a pointer on hover */
    overflow-y: auto;
}

<html>
  <head>
  <body>
    <center>
      <h5>Overlay Messaging Demo</h5>
      <br />
      <br />
      <button id="btnErrorCheck" style="width:30%;" onclick="errorCheck()">Check for Errors</button>
    </center>

    <!-- Spinner Overlay -->
    <div id="overlaySpinner" class="overlay" style="text-align:center;">
      <div class="text-center" style="height:45%"></div>
      <div class="text-center" style="height:5%">
        <div class="spinner-border text-primary" role="status">
          <span class="sr-only">Loading...</span>
        </div>
      </div>
      <div class="text-center" style="height:5%; font-family:Arial; font-size:20px; font-weight:bold; text-align:center; margin-top:12px;">
        <span id="msgSpinner"></span>
      </div>
    </div>
  </body>
  </head>
</html>

为什么我不能在 Microsoft Edge 中使用页面覆盖？

Why can't I use page overlays with Microsoft Edge?

overlay

microsoft-edge