Появление окна слево под курсором мышки
Всем привет!!! Недавно задался задачей такой: есть ссылка какая нибудь, при клике на нее появляется дивчик прямо под курсором слева, вот это прямо под курсором слева сделать не могу, где то в сети видел пример когда то, а вспомнить не могу, помогите пожалуста.
|
<!DOCTYPE html>
<style>
#popup{
position: fixed;
background: rgba(0, 0, 0, 0.8);
box-shadow: 0 0 5px black;
padding: 3px 6px;
color: white;
font: 12px Arial;
}
</style>
<a href="#">Ссыкла какая нибудь</a>
<div id="popup" style="display:none">дивчик</div>
<script>
(function(){
var link = document.querySelector('a');
var popup = document.getElementById('popup');
link.addEventListener('click', function(e){
e.preventDefault();
popup.style.display = 'block';
popup.style.left = e.pageX - popup.offsetWidth + 'px';
popup.style.top = e.pageY + 'px';
});
})();
</script>
|
Спасибо большое за пример, но мне надо определить координаты курсора относительно элемента, допустим относительно body
|
1) Определяем координаты элемента относительно окна (через getBoundingClientRect)
2) Вычитаем из координат курсора координаты элемента |
Смотрите что на просторах javascript.ru нашел
function mousePageXY(e)
{
var x = 0, y = 0;
if (!e) e = window.event;
if (e.pageX || e.pageY)
{
x = e.pageX;
y = e.pageY;
}
else if (e.clientX || e.clientY)
{
x = e.clientX + (document.documentElement.scrollLeft || document.body.scrollLeft) - document.documentElement.clientLeft;
y = e.clientY + (document.documentElement.scrollTop || document.body.scrollTop) - document.documentElement.clientTop;
}
return {"x":x, "y":y};
}
Добавил себе в копилочку, но все равно спасибо за все) |
Цитата:
|
Да собственно ничем, просто тут готовая функция, в полиэтилене))))
|
Так нужно с использованием jquery или нет?
|
Ну с самого начала нужно было с использованием jquery теперь уже пофиг))) Все равно спасибо вам
|
$('a').click(function(e){
alert(e.pageX);
});
Это замена вашему скрипту )) А вобще странно. Я вам предложил вариант с .pageX, но вы сказали что вам нужны координаты относительно некоторого элемента. Потом вы приводите код где используется тот же самый .pageX без всякой обработки, и который якобы решает вашу задач. Как так? |
| Часовой пояс GMT +3, время: 14:36. |