Есть вот такой просто код:
<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
#lBlkDiv {
position: absolute;
left: 0px;
top: 0px;
width: 0px;
height: 0px;
z-index: 999;
opacity: 50%;
background-color: navy;
display: none;
}
</style>
<script type="text/javascript" lang="javascript">
var startDelay = 1000;
// навешивание обработчика
function addEvent(elem, type, handler){
if(elem.addEventListener){
elem.addEventListener(type, handler, false);
} else {
elem.attachEvent('on'+type, handler);
}
return false;
}
addEvent(window, 'load', function() {init()});
function init() {
if(startDelay >= 0)
setTimeout("showDiv()", startDelay);
displayCountDown(countDown);
setInterval("countDownDecr()", 1000);
}
function showDiv() {
var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;
var h = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;
var lBlkDiv = document.getElementById("lBlkDiv");
lBlkDiv.style.display = "block";
lBlkDiv.style.right = w;
lBlkDiv.style.bottom = h;
alert(lBlkDiv.style.display + "\n"
+ lBlkDiv.style.width + "\n"
+ w + " : " + h + "\n" + lBlkDiv.style.right + " : " + lBlkDiv.style.bottom);
}
</script>
</head>
<body>
<div id="lBlkDiv"> </div>
</body>
</html>
Чего я хотел: через заданное startDelay время должен появляться DIV, накрывающий всю страницу, и блокирующий доступ ко всем её контролам. Но этого не происходит. Всё работает, за исключением установки размеров DIV'а. Сначала пробовал через width и height - тот же нулевой эффект. При этом, значение display изменяется нормально.
Если к w и h добавить "px", то alert эти значения выводит, т.е. они вроде как, появляются у DIV'а, но внешне ничего не меняется - DIV поверх всей страницы не появляется.
Подскажите, пожалуйста, в чём может быть дело, почему не меняются размеры DIV'а? И как их всё-таки изменить?