ФорумПрограммированиеJavaScript → Всплывающий див над другим дивом

Всплывающий див над другим дивом

  • smackthat

    Сообщения: 464 Репутация: N Группа: Адекваты

    Spritz 3 ноября 2010 г. 12:26

    Вот допустим есть у нас простой html:

    <div id="box" >box</div>
    <div id="popup">popup info</div>


    Как сделать на jquery, чтобы когда наводишь курсор на box появлялся popup прямо над боксом. Может плагин есть какой готовый, посоветуйте.
  • Sinkler

    Сообщения: 8083 Репутация: N Группа: в ухо

    Spritz 3 ноября 2010 г. 12:50, спустя 23 минуты 50 секунд


    box = $('#box');
    popup = $('#popup');
    box.bind('mouseover', function() {
    popup.css('display', 'block');
    });
    box.bind('mouseleave', function() {
    popup.css('display', 'none');
    });

    Спустя 39 сек.
    ну и попап расположи как тебе надо
    Спустя 33 сек.
    возможно, тебе mouseleave надо будет поставить не на бокс, а на попап
  • smackthat

    Сообщения: 464 Репутация: N Группа: Адекваты

    Spritz 3 ноября 2010 г. 13:29, спустя 38 минут 46 секунд

    делаю вот так, но див popup не меняет свою позицию:

    $(document).ready(function()
    {
    var box = $('#box');
    var popup = $('#popup');
    var top = box.css('top');
    var left = box.css('left');


    box.bind('mouseover', function()
    {
    popup.css('display', 'block');
    popup.css('position', 'absolute');
    popup.css('top', top);
    popup.css('left', left);

    });


    box.bind('mouseleave', function()
    {
    popup.css('display', 'none');
    });


    });

  • smackthat

    Сообщения: 464 Репутация: N Группа: Адекваты

    Spritz 3 ноября 2010 г. 13:39, спустя 10 минут 28 секунд

    вроде разобрался - если через offset брать координаты, то пашет
  • Sinkler

    Сообщения: 8083 Репутация: N Группа: в ухо

    Spritz 3 ноября 2010 г. 13:46, спустя 6 минут 55 секунд

    ok
  • smackthat

    Сообщения: 464 Репутация: N Группа: Адекваты

    Spritz 3 ноября 2010 г. 14:22, спустя 35 минут 56 секунд

    теперь другая проблема вылезла: если в див поместить какой-то текст, то после того как попап вылез он начинает, то исчезать, то появляться непонятно почему. Толи при наведении курсора на текст, то еще чего-то. В чем может быть проблема?

    залил видео:
    http://tinypic.com/r/34jdi7a/7


    $(document).ready(function()
    {
    var box = $('#box');
    var popup = $('#popup');
    //var pos = box.offset();


    $('.gameInfo').bind('mouseover', function()
    {
    var pos = $(this).offset();

    popup.show(100);
    popup.css('position', 'absolute');
    popup.css('top', pos.top);
    popup.css('left', pos.left);
    });


    popup.bind('mouseout', function()
    {
    popup.hide(100);
    });


    });
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 3 ноября 2010 г. 14:31, спустя 9 минут 8 секунд

    $(document).ready(function()
    {
       var box = $('#box');
       var popup = $('#popup');
       //var pos = box.offset();


       $('.gameInfo').bind('mouseover', function()
       {
           var pos = $(this).offset();
         
           popup.show(100);
           popup.css('position', 'absolute');
           popup.css('top', pos.top);
           popup.css('left', pos.left);
       });
     
     
    popup.bind('mouseover', function() {
           $(this).css('display','block');
       }).bind('mouseout', function() {
           $(this).hide(100);
    });

     
    });


    при наведении на бокс у тебя появляется попап и курсор уже на нем, а не на боксе, по этому срабатывает скрытие…
    Высокоуровневое абстрактное говно
  • smackthat

    Сообщения: 464 Репутация: N Группа: Адекваты

    Spritz 3 ноября 2010 г. 15:13, спустя 41 минуту 54 секунды

    но почему срабатывает скрытие? я же указывал скрывать, когда popup.bind('mouseout'
    с вашим кодом тоже то исчезает, то появляется :(
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 3 ноября 2010 г. 14:50, спустя 23 часа 37 минут 2 секунды

    а попап один, или для каждого наведения свой? если для каждого свой, то лучше
    <div id="box">
    <div class="popup"></div>
    </div>


    так всегда при наведении на бокс курсор будет на боксе, не зависимо от всплывшего попапа…
    Высокоуровневое абстрактное говно
  • smackthat

    Сообщения: 464 Репутация: N Группа: Адекваты

    Spritz 3 ноября 2010 г. 15:05, спустя 14 минут 22 секунды

    попап один, меняется лишь его положение. Пробывал z-index: 1000 попап диву, чтобы он всегда поверх всего был, не помогло - то исчезает, то появляется в некоторых случаях
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 3 ноября 2010 г. 15:07, спустя 2 минуты 25 секунд

    ссылку ф студию, де эт у тебя… или весь исходник))
    Высокоуровневое абстрактное говно
  • smackthat

    Сообщения: 464 Репутация: N Группа: Адекваты

    Spritz 3 ноября 2010 г. 15:16, спустя 8 минут 58 секунд

    залил сюда http://smck8196.coolvds.com/
  • smackthat

    Сообщения: 464 Репутация: N Группа: Адекваты

    Spritz 3 ноября 2010 г. 15:24, спустя 8 минут 32 секунды

    да, забыл добавить, попап-див вылазит, когда наводишь на любую ячейку турнирной сетки
  • technobulka

    Сообщения: 4540 Репутация: N Группа: Джедаи

    Spritz 3 ноября 2010 г. 15:45, спустя 20 минут 19 секунд

    ну в таком случае

    popup.show();

    popup.hide();

    точно не моргает)) по-другому делать лениво))
    Высокоуровневое абстрактное говно
  • smackthat

    Сообщения: 464 Репутация: N Группа: Адекваты

    Spritz 3 ноября 2010 г. 16:07, спустя 21 минуту 50 секунд

    да не моргает, спасибо.

Пожалуйста, авторизуйтесь, чтобы написать комментарий!