Помогите отцентрировать по вертикали всплывающее окно!
 

Добрый день!

У меня следующая проблема:
у меня есть страница html, в которой есть слово "ПРИМЕР". К этому слову прицеплено всплывающее окно, которое вызывается через отдельный файл следующей функцией:

$("#showExample").click(function(){
$("#example-window").fadeIn("normal");
return false;
})

У меня стоит проблема: т.к. страница со словом "ПРИМЕР" достаточно "длинная", а само слово находится почти внизу страницы, то всплывающее окно всплывает вверху браузера, его просто не видно. Я задала через CSS top=100%, после чего окно стало всплывать почти в нужном месте. Но встала другая проблема: при некоторых разрешениях браузеров окно все равно "уходит" за экран.

Прошу подсказать, как универсально всплывающее окно привязать к конкретному месту на странице (в моем случае - к слову "ПРИМЕР")

П.С. Если можно, объясните наиболее понятно, потому как в javascript я почти не бум-бум

Заранее спасибо!

Если нужно в тоже самое место, где находится элемент поместить другой, то есть несколько вариантов, возможно в вашем случае подойдет простое вычисление координат по двум осям $('#id').offset().top / left

a вообще, если нужно выронить с абсолютным позиционированием элемент, то:

position: absolute;
bottom: 0px;

чтобы элемент постоянно находился в одном месте экрана

position: fixed;

с вашим вариантом через bottom:0 px или position: fixed - все равно не получается.
Всплывающее окно в этих случаях не привязывается к низу окна браузера в том месте, гед юзер находится

Оно привязывается к низу окна браузера, как если бы страница только открылась (то есть отсчет идет от самого верха страницы)

... подойдет простое вычисление координат по двум осям $('#id').offset().top / left



не подскажете, а в моем примере как это будет выглядеть? вот с вашим кодом?

вот так:

$('#example-window').offset().100 /100
$("#showExample").click(function(){
$("#example-window").fadeIn("normal");
return false;
})

или надо в какое-то другое место вставить?

Внимательно изучите примеры:

В это случае выравнивание происходит относительно оси X
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
#div1,  #div2 {
	width: 50px;
	height: 50px;
}

#div1 {
	background: red;
	margin: 0px auto;
}

#div2 {
	background: green;
	position: absolute;
}
</style>
<script>
$(function(){
	$('#div2').css('left', $('#div1').offset().left);
});
</script>
<div id="div1"></div>
<div id="div2"></div>

а в этом случае относительно оси X и Y, т.е. элемент #div2 лежит в тех же координатах, что и элемент #div1 (перекрывает)
<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<style type="text/css">
#div1,  #div2 {
	width: 50px;
	height: 50px;
}

#div1 {
	background: red;
	margin: 0px auto;
}

#div2 {
	background: green;
	position: absolute;
}
</style>
<script>
$(function(){
	var offset = $('#div1').offset();
	$('#div2').css({
		top : offset.top,
		left : offset.left
	});
});
</script>
<div id="div1"></div>
<div id="div2"></div>

PS: но мне кажется, в вашей задаче можно и CSS обойтись