Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 04.09.2012, 22:13
Интересующийся
Отправить личное сообщение для qazibum Посмотреть профиль Найти все сообщения от qazibum
 
Регистрация: 13.08.2012
Сообщений: 25

затемнение по высоте страницы, а не окна
Есть вот такой код, затемняет страницу при выводе окна. Страница затемняется по высоте окна, а ниже, если прокрутить, не затемняется.
Как исправить, чтобы затемнялась вся страница? Подскажите, пожалуйста.
Запрещать прокрутку не хочется, там сайт ломается из-за position:fixed;overflow:hidden;

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=windows-1251" />
<style type="text/css">
body {margin:0; padding:0}
h1, h2 {text-align:center; color:#f00}
p {margin:0; text-align:justify; text-indent:1.5em}
#content {padding:5px}
/* черная полупрозрачная подложка */
#ten {
	display:none;
	position:absolute;
	width:100%;
	text-align:center;
}
/* для нормальных браузеров */
/* IE 6 не понимает спецификатора дочернего селектора > */
body > #ten {
background-color:#000;
-moz-opacity: 0.2; /* код для движков Mozilla */
opacity:.20; 
}
/* псевдоокно */
#form {
	display:none;
	position:fixed;
	width:400px;
	height:200px;
	margin:auto;
	padding:20px;
	text-align:left;
	background-color:#fff;
bottom:150px;
left:300px;
}
</style>
<!--[if IE]>
<style type="text/css">
#ten {filter: Alpha(Opacity=20); background-color:#000;}
</style>
<![endif]-->
<script type="text/javascript">
var timer = null;
var opacity = 20;
function sfp_changePage ()
{
	// нагромождение с низким поклоном Великому Биллу
	// для нормальных браузеров достаточно window.innerHeight
	var height = (window.innerHeight? window.innerHeight: 
		(document.documentElement.clientHeight? document.documentElement.clientHeight: 
		document.body.offsetHeight));
	var width = (window.innerWidth? window.innerWidth: 
		(document.documentElement.clientWidth? document.documentElement.clientWidth: 
		document.body.offsetWidth));

	var top = Math.ceil(height / 2 - 110);	// 110 - половина высоты окна с формой, включая padding
	var left = Math.ceil(width / 2 - 210);	// 210 - половина ширины окна с формой, включая padding
	// устанавливаем черный полупрозрачный блок на весь экран
	document.getElementById ("ten").style.height = height+"px";
	// делаем его видимым
	document.getElementById ("ten").style.display = 'block';
	// делаем его видимым
	document.getElementById ("form").style.display = 'block';
	// "проявляем" затенение
	timer = setInterval ("shadow()", 1);
}
function shadow ()
{
	document.getElementById ("ten").style.opacity = opacity++	/ 100;
	document.getElementById ("ten").style.MozOpacity = opacity	/ 100;
	document.getElementById ("ten").style.filter = "Alpha(Opacity="+opacity+")";
	if (opacity >= 80)
		clearInterval (timer);
}
</script>
</head>
<body>
<div id="ten"></div>
<div id="form"></div>
<div id="content">
<p>Чтобы посмотреть, как это выглядит, нажмите кнопку:
<input type="button" onclick="sfp_changePage()" value="Показать окно" /></p>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
</body>
</html>
Ответить с цитированием
  #2 (permalink)  
Старый 04.09.2012, 22:44
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

либо задать подложке position: fixed; width: 100%; height: 100%
либо установить height = document.body.scrollHeight
Ответить с цитированием
  #3 (permalink)  
Старый 04.09.2012, 22:59
Интересующийся
Отправить личное сообщение для qazibum Посмотреть профиль Найти все сообщения от qazibum
 
Регистрация: 13.08.2012
Сообщений: 25

Что-то я не подумал о подложке.. Спасибо большое за помощь.
Ответить с цитированием
  #4 (permalink)  
Старый 06.09.2012, 15:35
Интересующийся
Отправить личное сообщение для qazibum Посмотреть профиль Найти все сообщения от qazibum
 
Регистрация: 13.08.2012
Сообщений: 25

А чем дополнить данный код для того, чтобы окно и тень появлялись не мгновенно, а плавно в течение 2-3 секунд?
jquery на сайт не подключен.
Ответить с цитированием
  #5 (permalink)  
Старый 07.09.2012, 09:37
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 12,783

Сообщение от qazibum
чем дополнить данный код для того, чтобы окно и тень появлялись не мгновенно, а плавно в течение 2-3 секунд?
Как вариант setTimeout + смена прозрачности...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Прокрутка окна при загрузке страницы dexteron Общие вопросы Javascript 5 09.04.2015 20:08
Высота страницы по высоте окна браузера Николян (X)HTML/CSS 4 16.01.2014 19:12
Смена стилей страницы при изменении размера окна браузера goooooch Javascript под браузер 6 19.11.2011 17:49
Высота страницы (не окна). ostwest Events/DOM/Window 7 07.01.2011 21:34
Закрытие окна и перезагрузка страницы Krondor Events/DOM/Window 2 03.11.2009 14:34