Форумы портала PHP.SU :: Версия для печати :: подгрузка в элемент поверх страницы

1. broshurkaplus - 12 Марта, 2012 - 16:04:22 - перейти к сообщению

здравствуйте, выдумал себе новую задачку
есть список например коментов, в них как сылки или в спанах имена юзерей, типо так

ааа
ааа
иии
ааа
иии
ссс

хотел бы реализовать такое: при наведении курсора или клике по сылке (спану) в элемент на странице подгружалось инфа о юзере, можно было перевести курсор на него и совершить действия в его элементах, убрал курсор - элемент исчез (или закрыл). отправить и получить данные я могу. пробовал функцию на онклик и постом отправлять и получать, чо то не работает вставка. не получается навесить онклик на спан.
и не могу заставить элемент быть рядом и поверх страницы...
вобщем чтобы Вы поняли общий смысл и идея такая - как у кнопки мне нравится от контакта: навёл курсор(или кликнул), получил инфу, убрал, скрылось.

пробовал плагины всякие для титлов и тд, не то, гугл не выдает.

если кто сталкиваля с похожим помогите.
если знаете - подскажите, опишите алгоритм, или куски кода, чтоб понять

2. Опоссум - 20 Марта, 2012 - 08:03:05 - перейти к сообщению

Ну мне кажется нужно смотреть в сторону модальных окон.
Попробуй элементы заключить не в <span> а в <div> они иногда по разному реагируют на события.

Ну собственно код тоже не плохо было бы показать Улыбка

3. DelphinPRO - 20 Марта, 2012 - 13:44:30 - перейти к сообщению

Опоссум пишет:

Попробуй элементы заключить не в <span> а в <div> они иногда по разному реагируют на события.

вот это новость O_o Улыбка

CODE (html):
скопировать код в буфер обмена

<!DOCTYPE html>
<html>
<head>
<title>Test</title>
        <script type="text/javascript" src="jquery-1.4.2.min.js"></script>
        <style type="text/css">
                .username {
                        position:relative;
                        cursor:pointer;
                }
                .userinfo {
                        position:absolute;
                        left:100%;top:0;
                        border:1px solid;
                        width:100px;height:40px;
                }
        </style>
</head>
<body>
<span class="username">Name</span>
<script type="text/javascript">
        $('.username').click(function(){
                $(this).append('<div class="userinfo"></div>');
                $ui = $(this).find('.userinfo');
                $.get('getinfo.php', function(response){
                        $ui.html(response);
                });
        });
</script>
</body>
</html>