javascript - 如何在页面刷新时阻止用户单击任何其他按钮(模态窗口解决方案的一部分)

Question

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

我认为的一个解决方案是在以下情况下调出模态窗口onChange 函数被调用，但它涉及大量的处理工作

所以我正在寻找是否有其他选择

Answer 1

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

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

并添加一些CSS:

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

注意:不透明度在 IE 8 及更早版本中不起作用，但快速 Google 会发现一些替代方法。

然后在你的 onChange 中(假设你使用 jQuery)只需放置一个 $('#overlay').show() 或 .fadeIn()，然后在完成时隐藏它，或者如果页面刷新则不需要做任何事情.

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

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

希望对您有所帮助。