Auto Close Simple Modal после того, как пользователь перемещает мышь?

Question

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

В настоящее время я работаю с SimpleModal , и он работает, чтобы показать, но вы должны нажать, чтобы закрыть.Кто-нибудь знает способ закрытия на основе движения мыши?Или похожий.

Или другой компонент, который я могу использовать.Эффективно то, что мы делаем, это показываем чрезмерно всплывающую подсказку, которая оказывается содержимым iFrame.Так что, если вам известна функция всплывающей подсказки jQuery, которая поддерживает показ iFrame, который также может работать.

Answer 1

Не проще ли использовать плагин всплывающей подсказки, который на самом деле показывает поведение, за которым вы следите (показать / скрыть окно при наведении на элемент)?

Я думаю, что лучше всего qTip .

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

---

Между тем, я мало что знаю о SimpleModal, и, поскольку вы не показываете никакого JavaScript, я могу только догадываться, как вы на самом деле создаете модальное диалоговое окно.

В любом случае, jQuery предлагает метод .hover () для обработки случаев ввода элемента мышью и выхода из него. Вы используете как это:

$('#myelement').hover(
    // this function is executed when entering the element with the mouse
    function(e) {
        // create you SimpleModal here
    },
    // this one when leaving
    function(e) {
        // close it here
        // from the SimpleModal doc, you close the currently opened modal with
        $.modal.close()
    }
);

DEMO

Answer 2

Чтобы закрыть SimpleModal, вы делаете

$.modal.close()

Поэтому я предлагаю использовать его вместе с mouseleave() из jQuery.

$("SELECTOR_FOR_YOUR_AREA").mouseleave($.modal.close);