Blocking the UI using HTML and CSS

Question

I'm writing a userscript. What I'm trying to do is really simple. I need to block the UI while the script does some background tasks. I saw this method in another SO question and I changed it a bit to suit me.

Check this fiddle. When you click on the button, it covers up the UI.

Now since this is gonna be used on a webpage, I need to inject the following HTML part to the webpage through the script.

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

I did it like this.

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);

Check this fiddle for a clear idea.

But it does not work. I tried several ways to tackle the problem but to no avail .Can anyone please point out what I'm doing wrong here?

Thank you.

P.S - I need to do this without using jQuery or the library blockUI.

Answer 1

You are trying to append stuff to head; append it to body instead.

http://jsfiddle.net/dAKQX/

Answer 2

Don't put the block div in the head section of your document. Use document.body.appendChild(blockUI); instead.