Search code examples
javascripthtmlcssuserscriptsblockui

Blocking the UI using HTML and CSS

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.

Solution

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

    or like this in your code:

    document.body.appendChild(blockUI);