Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.05.2011, 12:37
Аспирант
Отправить личное сообщение для debugx Посмотреть профиль Найти все сообщения от debugx
 
Регистрация: 24.05.2011
Сообщений: 40

Позиционирование всплывающего окна
Всем привет,
Есть на 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?
Ответить с цитированием
  #2 (permalink)  
Старый 24.05.2011, 12:45
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,121

Сообщение от debugx
А как сделать так, чтобы оно всплыло рядом с чекбоксом TestChecker?
- Правильно определить position ДИВа. Т.к. из твоих огрызков не понятно как он расположен в разметке страницы.
- Вычислить координаты элемента, для которого будет появляться ДИВ.
- Присвоить свойсттвам top и left ДИВа нужные значения.
Ответить с цитированием
  #3 (permalink)  
Старый 24.05.2011, 13:00
Аспирант
Отправить личное сообщение для debugx Посмотреть профиль Найти все сообщения от debugx
 
Регистрация: 24.05.2011
Сообщений: 40

Вот так я определяю координаты элемента, для которого будет появляться див:
$('.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;
	}
	...
});
Ответить с цитированием
  #4 (permalink)  
Старый 24.05.2011, 13:10
Аватар для ksa
ksa ksa вне форума
CacheVar
Отправить личное сообщение для ksa Посмотреть профиль Найти все сообщения от ksa
 
Регистрация: 19.08.2010
Сообщений: 14,121

Сообщение от 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>
Ответить с цитированием
  #5 (permalink)  
Старый 24.05.2011, 13:11
Аватар для walik
Профессор
Отправить личное сообщение для walik Посмотреть профиль Найти все сообщения от walik
 
Регистрация: 09.11.2009
Сообщений: 1,101

var positions = $('testChecker').offset();
$('.bubbleInfo').css(positions);
__________________
"Всегда пишите код так, будто сопровождать его будет склонный к насилию психопат, который знает, где вы живете."
Мой сертификат :-D клацай
Ответить с цитированием
  #6 (permalink)  
Старый 24.05.2011, 15:47
Аспирант
Отправить личное сообщение для debugx Посмотреть профиль Найти все сообщения от debugx
 
Регистрация: 24.05.2011
Сообщений: 40

спасибо, разобрался
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Плавное открытие окна. Flashton Элементы интерфейса 3 20.10.2010 16:00
Вставка данных в textarea из модального окна (для Markitup) Roman Koff jQuery 0 26.08.2010 23:21
Модальные окна и $().html(); maxsoftware jQuery 2 12.04.2010 10:01
script для всплывающего окна?????! BIZNES123 Элементы интерфейса 3 04.12.2009 10:43
Вызов скрипта в теле всплывающего окна на Javascript demchenko Я не знаю javascript 2 10.06.2009 10:46