如何阻止用户点击任何其他按钮，而页面刷新(从模态窗口解决方案的一部分)

How to stop user from clicking any other button while page is refreshing (a part from Modal window solution)

本文关键字：模态 刷新 窗口 解决方案 一部分 用户 何阻止 任何 其他 按钮      更新时间：2023-09-26

我正在寻找一个解决方案，如果用户选择一个选择框项时，页面用更新后的数据刷新。这是使用onChange函数。同时，如果用户点击submit，然后点击reset按钮，所做的任何更改都将被重置，因为在onChange之后没有发生提交。

我认为的一个解决方案是在调用onChange函数，但是它涉及到处理

的大量工作。

所以我在看是否有其他的

我会走模态和/或叠加路线，这是一个更好的用户体验，因为用户可以看到正在发生的事情。最简单的解决方案就是在页面的某个地方粘贴一个div 

<div id="overlay"></div>

和添加一些css:

#overlay {
    height: 100%;
    width: 100%;
    background-color: #ffffff;
    opacity: 0.7;
    z-index:10;
    position:fixed;
    display:none;
}

注意:不透明在ie8和更早的版本中不起作用，但快速搜索一下就会发现有其他选择。

然后在你的onChange(假设你使用jQuery)只是放一个$('#overlay').show()或。fadein()，或者隐藏它时完成或如果页面刷新没有必要做任何事情。

如果你不想让任何东西可见，去掉背景色和不透明度，它就不可见了。

为了清晰起见，我建议在#overlay的中间放置一个加载gif。

希望有帮助。

禁用onchange中调用的方法中的按钮。然后在页面加载时启用它们。

function onChangefunc()
{
  document.getElementById("button1").disabled = true;
  document.getElementById("button2").disabled = true;
  document.getElementById("button3").disabled = true;
  // do rest of your logic here  
}

然后将其放置在页面末尾的标签中:

  <script>
  document.getElementById("button1").disabled = false;
  document.getElementById("button2").disabled = false;
  document.getElementById("button3").disabled = false;
  </script>
相关文章：