Позиционирование в зависимости от выбранного элемента в таблице

0

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

У меня есть это (хотя и с большим количеством изображений):

<div id="edit" class="popup"><center><p>Edit | Share | Delete</p></center></div>
<ul>
    <li>
        <img id="image1" class="image" src="01.png"/>
    </li>
    <li>
        <img id="image2" class="image" src="02.png"/>
    </li>
    <li>
        <img id="image3" class="image" src="03.png"/>
    </li>
</ul>

и Javascript:

$(".image").click(function(){
    var id = $(this).attr('id');
    $("#edit").fadeIn();
};
  • 0
    Это отлично! Это просто способ сделать это. Где именно вы находите трудности?
  • 0
    Ну, проблема в том, как разместить речевой шар, нависающий над правым изображением. Теперь он просто парит в углу.
Теги:

1 ответ

0
Лучший ответ

Ну, поскольку вы используете jQuery, я бы предложил использовать функцию offset (https://api.jquery.com/offset/)

вам нужно будет установить положение редактирования в абсолютное, с CSS:

#edit{
        position: absolute;
}

Javascript:

$(".image").click(function(){
    var id = $(this).attr('id');
    var offset = $(this).offset(); //get the clicked element position
    offset.top += $(this).height(); // add the height, because we want the bubble
                                    // to be directly below
    $("#edit").offset(offset); //set 'edit offset
    $("#edit").fadeIn();
});

посмотрите скрипку: http://jsfiddle.net/SpacePineapple/h4FXb/

Поделиться
  • 0
    Я не знаю, имеет ли это какое-либо отношение к вашему предлагаемому коду или моему, но он продолжает плавать в верхней части таблицы. Независимо от того, какое изображение я нажимаю. (У меня в таблице три изображения подряд).
  • 0
    Я ... хм ... Я сделал правку для необходимого CSS, который у вас может не быть, но в любом случае это должно было сработать. Вы проверяли скрипку?
Показать ещё 1 комментарий

Ещё вопросы

Сообщество Overcoder
Наверх
Меню