Отображение другого всплывающего сообщения на основе того, что нажали

Question

Мне нужна помощь в создании функции jquery, которая будет отображать всплывающее сообщение при нажатии на изображение. Каждое изображение будет иметь свое всплывающее сообщение. Вот мой HTML-код:

<table>
<tr>
    <td>
        <a href="#">
            <img src="/face.jpg" />
            <span>
                <div class="bubble">
                    THIS IS MY POPUP MESSAGE 1
                </div>
            </span>
        </a>    
    </td>   

    <td>
        <a href="#">
            <img src="/face.jpg" />
            <span>
                <div class="bubble">
                    THIS IS MY POPUP MESSAGE 2
                </div>
            </span>
        </a>    
    </td>

    <td>
        <a href="#">
            <img src="/face.jpg" />
            <span>
                <div class="bubble">
                    THIS IS MY POPUP MESSAGE 3
                </div>
            </span>
        </a>    
    </td>
</tr>

Answer 1

Я дам вам ответ того же уровня, что и вопрос. Мой трюк, однако, вы должны включить JQuery UI

CSS

a span {display: none}

Загрузите и включите jQuery UI

HTML

<script src="javascripts/jquery-ui.js"></script>

JS

$('a').click(function() {
  $(this).find('span').dialog();
})