Реализация всплывающего информационного окна

Question

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

Я в основном хочу, чтобы при перемещении курсора мыши из ячейки календаря, скрытой информационным блоком, он исчезал.Но у меня возникли проблемы с этим, потому что mouseenter и mouseleave испорчены тем, что информационный блок является верхним элементом.

Так что я попытался обойти это, используя "заполнители" div, которыепрозрачные, имеют ту же форму и расположение, что и ячейка календаря под ним, и имеют z-индекс 1000, поэтому они находятся над информационным полем.Затем я применяю к этим div'ам события mouseenter и mouseleave.

Однако с этим есть две проблемы.Во-первых, я теперь испортил свой HTML семантически.У div'ов нет никакой цели, кроме как обойти то, что кажется ограничением.И во-вторых, они испортили мой выбор пользовательского интерфейса jQuery (я применил его к ячейкам календаря - щелчок больше не выделяет ячейку).

Есть ли чистый способ обработки отображения информационного окна?Пользователь не будет взаимодействовать с информационным полем - он просто отображает информацию.

РЕДАКТИРОВАТЬ : Вот код:

<li>
    <div class="day-content">
    </div>
    <div class="day-content-placeholder">
    </div>
</li>

и CSS

li
    { position: absolute; width: 15%; height: 20%; top: ... left: ... }
.day-content
    { position: absolute; width: 100%; height: 100%; }
.day-content-placeholder
    { position: absolute; width: 100%; height: 100%; z-index: 1000; }
.popup
    { position: absolute; width: 300%; height: 300%; left: -150%; top: -150%; z-index: 500; }

и Javascript

var popup;
$('.week-content-placeholder')
    .mouseenter(function()
        {
        popup = $('<div class="popup">'+a_lot_of_text+'</div>').insertAfter(this);
        })
    .mouseleave(function()
        {
        popup.remove();
        });

Это не точный код, но вы поняли идею.Это работает хорошо, но, как я уже сказал, поскольку .week-content-placeholder выше .week-content, возможность выбора с помощью jQuery UI не работает должным образом на .week-content.

Answer 1

Хитрость в том, чтобы сделать информационное поле дочерним по отношению к ячейке:

<div id='box'>
    Normal content
    <div id='inner'>
        This big box obscures everything in the cell!
    </div>
</div>

Внутренняя коробка скрыта, пока не произойдет зависание. Обратите внимание, что с помощью CSS мы можем сделать прямоугольник больше, чем сама ячейка с отрицательными полями.

#box
{
  width:100px;
  height:100px;
  margin:100px;
  border:solid 2px darkblue;
  position:relative;
}
#box #inner
{
  display:none;
  position:absolute;
  background-color:#eeee00;
  top:-10px;
  left:-10px;
  width:120px;
  height:120px;
}

И вы можете использовать обычный jquery hover, потому что hover охватывает поле, и это дочерний элемент:

$('#box').hover(function(){
    $('#inner').show();
},function(){
    $('#inner').hide();
});

Вот оно работает:

http://jsfiddle.net/RbqCT/

Вы можете создавать информационное окно динамически, как в коде.

Answer 2

Вы можете изменить свое решение с помощью прозрачных div-элементов "placeholder" следующим образом:

Пропустить "placeholder" под "календарной ячейкой", используя {zIndex: -1}.

Когда вы входите в ячейку календаря, раскройте большой div «content» и установите {zIndex: 1000} в div «placeholder», чтобы вывести его наверх.

У события «mouseout» в div заполнителя, который будетскройте div "content" и установите {zIndex: -1} для ячейки "placeholder".

Вместо того, чтобы создавать ячейки "placeholder" в HTML, вы можете создать одну в javascript и переместить ее в позициюкаждой ячейки "календаря", как вы "мыши" в нем.Вы также можете продублировать любые события «щелчка» в «ячейке календаря» на эту ячейку.

Дайте мне знать, если это работает.

Answer 3

Вы можете отслеживать мышиную мышь и использовать для сравнения значения offsetLeft + width и offsetTop + высота триггера при наведении курсора на event.pageX и event.pageY.

Answer 4

Вот 15 различных плагинов, которые позволяют вам делать это с помощью jquery:

http://www.webdesignbooth.com/15-jquery-plugins-to-create-an-user-friendly-tooltip/

Answer 5

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

Пользователь видит только движение внутри самого всплывающего окна - небольшое движение внутри всплывающего окна оставляет его на месте;большое движение заставляет его исчезнуть.

Я предлагаю вызвать исчезновение всплывающего окна при выходе из самого pop-div.Любое движение, которое остается внутри панели «наконечника», оставляет его вверх.Я думаю, что (1) это удобнее в использовании и (2) это позволяет избежать всей проблемы с скрытой обработкой событий в ячейке календаря.

Это можно сделать, добавив обработчик .mouseleave() в div при созданииэто.