使用 HTML 和 CSS 阻止 UI答案

【问题标题】：Blocking the UI using HTML and CSS使用 HTML 和 CSS 阻止 UI
【发布时间】：2012-02-05 06:34:10
【问题描述】：

我正在编写用户脚本。我想做的很简单。我需要在脚本执行一些后台任务时阻止 UI。我在另一个 SO question 中看到了这种方法，并对其进行了一些更改以适合我。

检查此fiddle。当您单击按钮时，它会覆盖 UI。

现在由于这将在网页上使用，我需要通过脚本将以下 HTML 部分注入网页。

<div id="blocker">
<div>Loading...<img src="http://www.socialups.com/static/images/fbinventory/ajax_loader.gif"></div>
</div>

我是这样做的。

var blockUI = document.createElement("div");
blockUI.setAttribute("id", "blocker");
blockUI.innerHTML = '<div>Loading...<img src="http://www.socialups.com/static/images/fbinventory/ajax_loader.gif"></div>'
document.head.appendChild(blockUI);

查看fiddle 以获得清晰的想法。

但它不起作用。我尝试了几种方法来解决这个问题，但无济于事。谁能指出我在这里做错了什么？

谢谢。

P.S - 我需要在不使用 jQuery 或库 blockUI 的情况下执行此操作。

【问题讨论】：

标签： javascript html css userscripts blockui

【解决方案1】：

您正在尝试将内容附加到head；而是将其附加到body。

http://jsfiddle.net/dAKQX/

【讨论】：

【解决方案2】：

不要将块 div 放在文档的 head 部分。请改用document.body.appendChild(blockUI);。

【讨论】：

【解决方案3】：

您需要将您的 div 附加到文档的正文中。见：http://jsfiddle.net/zkzQy/1/

或者在你的代码中这样：

document.body.appendChild(blockUI);

【讨论】：

天哪，我怎么没试过！愚蠢的！无论如何，非常感谢！