HTMLとCSSを使用してUIをブロックする

Question

私はuserscriptを書いています。私がやろうとしていることは本当に簡単です。スクリプトがいくつかのバックグラウンドタスクを実行している間、UIをブロックする必要があります。私は別のSOの質問でこの方法を見て、私はそれを私に合うように少し変えました。

これをチェックする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); 

これを確認してください。明確な考えがあります。

しかし、動作しません。私は問題に取り組むためにいくつかの方法を試しましたが、役に立たなかったのです。誰も私がここで間違っていることを指摘できますか？

ありがとうございます。

P.S - これは、jQueryまたはライブラリのblockUIを使用せずに行う必要があります。

Answer 1

文書の本文にdivを追加する必要があります。参照：

またはあなたのコード内でこのようなhttp://jsfiddle.net/zkzQy/1/：あなたはheadにコンテンツを追加しようとしている

document.body.appendChild(blockUI); 

Answer 2

ブロックdivを文書のheadセクションに置かないでください。代わりにdocument.body.appendChild(blockUI);を使用してください。

Answer 3

。代わりにbodyに追加してください。

http://jsfiddle.net/dAKQX/