Начал изучение JavaScript написал первый примерчик и столкнулся с такой проблеммой - всё хорошо элемент появляется по середине экрана, но если изменять размер окна браузера то элемент не подстраивается под размеры. Как осуществить такое действо, вот пример моего творения:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<script type="text/javascript">
function opacity(e)
{
var opacity = document.getElementById('opacity');
var form = document.getElementById('form');
if(e == true)
{
opacity.removeAttribute('class');
form.removeAttribute('class');
var width = (document.documentElement.clientWidth - form.offsetWidth)/2;
var height = (document.documentElement.clientHeight - form.offsetHeight)/2;
form.style.top = height + 'px';
form.style.left = width + 'px';
}
else
{
opacity.setAttribute('class', 'hidden');
form.setAttribute('class', 'hidden');
}
}
</script>
<style type="text/css">
.hidden {
display: none;
}
#opacity {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.4;
filter: alpha(opacity=40);
z-index: 1;
}
#form {
position: absolute;
padding: 0px 10px 10px 10px;
background: #f0f;
z-index: 2;
}
.cursor {
cursor: pointer;
}
</style>
</head><body>
<div id="opacity" class="hidden"></div>
<div id="form" class="hidden">
<span class="cursor" onclick="opacity(0);">x</span>
<form action="" method="post">
Ваш логин:<br>
<input class="itext" type="text" name="login" maxlength="30"><br>
Ваш пароль:<br>
<input class="itext" type="password" name="password" maxlength="30"><br>
<br>
<input class="ibutton" type="submit" value="Войти">
</form>
</div>
<a href="#" onmousedown="opacity(1);">Затемнить окно?</a><br>
</body></html>
Предложения обратиться к jQuery не приветствуются, а то я туда сунулся было и чуть с ума не сошёл, надо сначало так JavaScript выучить. Заранее спасибо!