Question

我有两种形式，一种是从用户接收输入，另一种形式（弹出窗口）执行数据并将结果显示给用户。有时第二种形式即弹出窗口需要更多时间来执行数据，因此用户关闭该弹出窗口，因为他/她认为存在网络问题。
所以我想阻止用户关闭该弹出窗口。所以我认为在所有事情之上的额外div会解决我的问题。我也尝试了一些例子，但它不能解决我的问题。我想把div放在弹出窗口的顶部。可能吗？请帮帮我。

Answer 1

如果通过弹出窗口表示浏览器自带的弹出窗口，那就不可能了。因为在这种情况下，您需要更改不是要实现的浏览器代码。我建议你做的是，当你在后台进行处理时 - 无论需要多长时间 - 显示一些进程条操作信息消息给用户。

Answer 2

U可以有一个非常高的z-index，例如9999的叠加层，并在操作完成后移除叠加层，请说出呼叫功能 - openNav()和closeNav()每次打开/关闭叠加层。

网站w3schools

中的一些代码

＆＃13;

<!DOCTYPE html>
<html>
<style>
body {
    margin: 0;
    font-family: 'Lato', sans-serif;
}

.overlay {
    height: 100%;
    width: 0;
    position: fixed;
    z-index: 9999;
    top: 0;
    left: 0;
    background-color: rgb(0,0,0);
    background-color: rgba(0,0,0, 0.9);
    overflow-x: hidden;
    transition: 0.5s;
}

.overlay-content {
    position: relative;
    top: 25%;
    width: 100%;
    text-align: center;
    margin-top: 30px;
}

overlay a {font-size: 20px}
  .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
  }
}
</style>
<body>

<div id="myNav" class="overlay">
  
  <div class="overlay-content">
  <div style="color:white;">Wait ...</div>  
  </div>
</div>



<script>
function openNav() {
    document.getElementById("myNav").style.width = "100%";
}

setTimeout(function closeNav() {
    document.getElementById("myNav").style.width = "0%";
},4000);  
  
openNav();
</script>
     
</body>
</html>

＆＃13;

Answer 3

以下是解决方案。

提交表单后，将弹出窗口显示给用户。在弹出窗口中添加加载动画。这样用户就知道某些东西在后台工作了。您可以通过http://loading.io/

轻松添加加载动画

完成表单中的计算后，删除该加载动画并将计算值放入该div，以便替换该div。你需要javascript或jquery。

即使在内置弹出窗口的顶部，也可以将div放在所有内容之上

3 个答案: