Форум

debugx · #1 (**permalink**) 24.05.2011, 12:37

Всем привет,
Есть на 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?

ksa · #2 (**permalink**) 24.05.2011, 12:45

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

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

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

debugx · #3 (**permalink**) 24.05.2011, 13:00

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

$('.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;
	}
	...
});

ksa · #4 (**permalink**) 24.05.2011, 13:10

Сообщение от 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>

walik · #5 (**permalink**) 24.05.2011, 13:11

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

debugx · #6 (**permalink**) 24.05.2011, 15:47

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

Форум

Справочник

Discord чат

Курсы javascript