使用HTML和CSS阻止UI

Question

我正在写一个用户脚本.我想做的事情非常简单.我需要在脚本执行一些后台任务时阻止UI.我在另一个SO问题中看到了这个方法,我改变了一下以适合我.

检查这个小提琴.当您单击按钮时,它会覆盖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);

检查这个小提琴是否有明确的想法.

但它不起作用.我尝试了几种方法来解决问题,但无济于事.任何人都可以指出我在这里做错了什么？

谢谢.

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

Answer 1

你正试图追加东西head; 追加它body.

http://jsfiddle.net/dAKQX/