使用HTML和CSS阻止UI

Question

我在寫一個用戶腳本。我想要做的事情非常簡單。我需要在腳本執行一些後臺任務時阻止用戶界面。我在另一個SO問題中看到了這種方法，我稍微改了一下以適應我。

選中此fiddle。當你點擊按鈕時，它會覆蓋用戶界面。

現在，因爲這將在網頁上使用，我需要通過腳本注入下面的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); 

檢查此fiddle有一個清晰的想法。

但它不起作用。我嘗試了幾種方法來解決問題，但無濟於事。請任何人指出我在這裏做錯了什麼？

謝謝。

P.S - 我需要這樣做，而不使用jQuery或庫blockUI。

Answer 1

您需要將您的div附加到文檔的正文。請參閱：http://jsfiddle.net/zkzQy/1/

或像這樣在你的代碼：

document.body.appendChild(blockUI); 

Answer 2

請勿將塊div置於文檔的head部分。改爲使用document.body.appendChild(blockUI);。

Answer 3

您正在試圖附加的東西head;請將其附加到body。

http://jsfiddle.net/dAKQX/