Скрытый div, чтобы показать, где щелкнуть

#jquery #css

Вопрос:

Мне нужно иметь скрытый div и показывать его, где бы я ни нажимал на страницу. Делаю ли я его положение относительным? Как мне связать с позицией щелчка?

1. Вы хотите сказать, что хотите, чтобы div отображался в той точке экрана, где нажимает ваш пользователь?

2. ДА. Не совсем положение пикселя, а скорее несколько ссылок, которые у меня будут на моей странице. Div должен был бы располагаться над ссылкой, на которую нажимается.

3. итак, есть один div, который должен отображаться над любой ссылкой, на которую нажимает пользователь? Или существуют разные div, соответствующий из которых должен появиться?

Ответ №1:

Если вы знаете jQuery, то вы можете сделать простую css({left:e.pageX, top:e.pageY}) замену для этого примера (щелкните в любом месте, и вы получите позицию):

http://jsbin.com/ufovo3

Вот код:http://jsbin.com/ufovo3/edit

 $(document).click(function(e){ //Change the "document" to whatever you want
  alert('x: ' e.pageX ', y:' e.pageY);
});

Вот лучшая демонстрация:
http://jsbin.com/ufovo3/2 /

источник http://jsbin.com/ufovo3/2/edit

Щелкните его и наблюдайте, как он перемещается в том месте, где вы нажимаете.

Ответ №2:

получите положение вашего курсора с помощью javascript: http://dev-notes.com/code.php?q=33

и установите это как левую и верхнюю позицию css, используя абсолютную позицию 🙂

Ответ №3:

Используйте свойства события mouseX и mouseY.

http://api.jquery.com/event.pageX/
http://api.jquery.com/event.pageY/

Затем установите абсолютное положение div после щелчка.

1. чувак, он не упомянул jquery :).

2. @SnippetSpace Вопрос помечен jquery, не так ли?

3. Вот и все. Он помечен как jquery 🙁

4. К вашему сведению, за вас проголосовали, потому что вы obv. got down проголосовали только потому, что они пропустили тег jQuery

Ответ №4:

ДЕМОНСТРАЦИЯ JSFIDDLE

 $(document).click(function(e) {
    var height = $('#popup').height();
    var width = $('#popup').width();
    leftV = e.pageX - (width / 2)   "px";
    topV = e.pageY - (height / 2)   "px";
    $('#popup').css({
        left: leftV,
        top: topV
    }).toggle();
});


.popup{
    position:absolute;
    background:#cf5;
    z-index:10;
    width:100px;
    height:100px;
    text-align:center;
    color:#4e4e4e;
    display:none;
}