Javascript-форум - Позиционирование всплывающего окна

Javascript-форум (https://javascript.ru/forum/)

- jQuery (https://javascript.ru/forum/jquery/)

- - Позиционирование всплывающего окна (https://javascript.ru/forum/jquery/17556-pozicionirovanie-vsplyvayushhego-okna.html)

Позиционирование всплывающего окна

Всем привет,
Есть на JQuery функция для показа всплывающего окна. Но проблема в том, что не получается позиционировать всплывающее окно рядом с нужным элементом.
Вот всплывающее окно, оно находится в конце страницы:

Код:

<div class="bubbleInfo">

        <div id="dpop" class="popup">

                Тест тест тест

        </div>

</div>

Вот какой-то элемент, по нажатию на который окно должно появляться:

Код:

<input type="check" class="trigger" id="TestChecker" />

Вот код показа окна:

Код:

$(function () {

    $('.bubbleInfo').each(function () {

        var distance = 10;

        var time = 250;

        var hideDelay = 1500;



        var hideDelayTimer = null;



        var beingShown = false;

        var shown = false;

        var trigger = $('.trigger', this);

        var info = $('.popup').css('opacity', 0);



        $([trigger.get(1), info.get(0)]).click(function () {

            if (hideDelayTimer) clearTimeout(hideDelayTimer);

            if (beingShown || shown) {

                return;

            } else {

                beingShown = true;



                info.css({

                    top: -40,

                    left: -33,

                    display: 'block'

                }).animate({

                    top: '-=' + distance + 'px',

                    opacity: 1

                }, time, 'swing', function () {

                    beingShown = false;

                    shown = true;

                });

            }



            return false;

        });

    });

});

Естественно окно всплывает в том месте, где и находится. А как сделать так, чтобы оно всплыло рядом с чекбоксом TestChecker?

Цитата:

Сообщение от debugx

А как сделать так, чтобы оно всплыло рядом с чекбоксом TestChecker?

- Правильно определить position ДИВа. Т.к. из твоих огрызков не понятно как он расположен в разметке страницы.
- Вычислить координаты элемента, для которого будет появляться ДИВ.
- Присвоить свойсттвам top и left ДИВа нужные значения.

Вот так я определяю координаты элемента, для которого будет появляться див:

$('.bubbleInfo').each(function () {
	...
	var pos = findPosition(this);
		
	function findPosition(oElement) {
		if (typeof (oElement.offsetParent) != 'undefined') {
			for (var posX = 0, posY = 0; oElement; oElement = oElement.offsetParent) {
				posX += oElement.offsetLeft;
				posY += oElement.offsetTop;
			}
			return [posX, posY];
		} else {
			return [oElement.x, oElement.y];
		}
	}
	...
});

Но не получается присвоить диву нужную позицию. В том же цикле:

$('.bubbleInfo').each(function () {
	...
	var popupWnd = document.getElementById('dpop');
	popupWnd.x = pos[0] + 'px';
	popupWnd.y = pos[1] + 'px';
	if (document.getBoxObjectFor) {
		popupWnd.style.left = popupWnd.x;
		popupWnd.style.top = popupWnd.y;
	}
	else {
		popupWnd.style.pixelLeft = popupWnd.x + document.documentElement.scrollTop;
		popupWnd.style.pixelTop = popupWnd.y + document.documentElement.scrollLeft;
	}
	...
});

Цитата:

Сообщение от debugx

не получается присвоить диву нужную позицию

Так вроде это не сложно...

<!DOCTYPE html>
<html>
<head>
<title>test</title>
<style type="text/css">
#container {
	width: 200px;
	height: 200px;
	border: 1px solid;
}
#win {
	position: absolute;
	display: none;
	background: orange;
}
</style>
<script type="text/javascript">
function Go() {
	var o=document.getElementById('win')
	o.style.display='block'
	o.style.top=Math.random()*200+'px'
	o.style.left=Math.random()*200+'px'
}
</script>
</head>
<body>
<div id='container'></div>
<input type='button' value='Go' onclick='Go()' />
<div id='win'>
	<p>Test</p>
</div>
</body>
</html>

var positions = $('testChecker').offset();
$('.bubbleInfo').css(positions);

спасибо, разобрался