javascript - 使用 jquery 禁用所有具有模态功能的页面元素

Question

我希望在执行某个操作时禁用所有页面元素。就像 JQuery UI 中的 modal 功能。

就像在 ajax 操作上一样。我希望显示通知并同时启用模态功能。并且在请求之后，需要重新启用页面元素。

在核心 jquery 中是否有任何可用的选项或任何插件？

Answer 1

页面元素并没有被禁用——这样做会很乏味——而是一个半透明的 div 覆盖在所有其他页面元素之上。为此，您可能会做类似

// Declare this variable in the same scope as the ajax complete function
overlay = $('<div></div>').prependTo('body').attr('id', 'overlay');

还有 CSS:

#overlay {
  position: fixed;
  height: 100%;
  width: 100%;
  z-index: 1000000;
  background: url('link/to/semitransparent.png');
}

然后一旦操作完成，您只需像这样删除它:

overlay.remove();

如果这是您唯一需要的，则无需包含 jQuery UI。