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

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

  • smackthat

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

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

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

    <div id=&quot;box&quot; >box</div>
    <div id=&quot;popup&quot;>popup info</div>


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

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

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


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

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

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

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

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

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


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

    });


    box.bind(&#39;mouseleave&#39;, function()
    {
    popup.css(&#39;display&#39;, &#39;none&#39;);
    });


    });

  • smackthat

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

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

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

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

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

    ok
  • smackthat

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

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

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

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


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


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

    popup.show(100);
    popup.css(&#39;position&#39;, &#39;absolute&#39;);
    popup.css(&#39;top&#39;, pos.top);
    popup.css(&#39;left&#39;, pos.left);
    });


    popup.bind(&#39;mouseout&#39;, function()
    {
    popup.hide(100);
    });


    });
  • technobulka

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

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

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


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

     
    });


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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    popup.show();

    popup.hide();

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

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

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

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

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