Блокировка интерфейса с использованием HTML и CSS

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

Проверьте это скрипка для ясной идеи.

Но это не работает.Я пробовал несколько способов решения этой проблемы, но безрезультатно. Может ли кто-нибудь указать, что я здесь не так делаю?

Спасибо.

PS - Янужно сделать это без использования jQuery или библиотеки blockUI.

Answer 1

Вы пытаетесь добавить материал к head;вместо этого добавьте body.

http://jsfiddle.net/dAKQX/

Answer 2

Не помещайте блок div в раздел head вашего документа.Вместо этого используйте document.body.appendChild(blockUI);.

Answer 3

вам нужно добавить свой div в текст документа. Смотри: http://jsfiddle.net/zkzQy/1/

или как это в вашем коде:

document.body.appendChild(blockUI);