UI blocking with HTML and CSS

Question

I am writing usercript. What I'm trying to do is really simple. I need to lock the interface, and the script does some background tasks. I saw this method in another question, and I modified it a bit to suit me.

Check the fiddle . When you click on a button, it closes the user interface.

Now, since this will be used on the webpage, I need to add the following HTML page to the webpage through a script.

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

I did it like that.

 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 the fiddle for a clear idea.

But that will not work. I tried several ways to solve the problem, but to no avail. Can anyone point out what I'm doing wrong here?

Thanks.

PS - I need to do this without using jQuery or the UI library block.

Answer 1

you need to add your div to the body of the document. See: http://jsfiddle.net/zkzQy/1/

or like this in your code:

 document.body.appendChild(blockUI); 

Answer 2

You are trying to add material to the head ; add it instead of body .

http://jsfiddle.net/dAKQX/

Answer 3

Do not put the div block in the head section of your document. Use document.body.appendChild(blockUI); .