CODEWITHSUNDEEP
javascriptjqueryjquery-ui
Kimtho6
Kimtho6

Reputation: 6184

jquery-ui close dialog

I have a little problem closing my dialog box in JavaScript/jQuery on mouse exit. here is the script

$().ready(function () {
    $(".popup").live("mouseover", function () {

        $(this).next().dialog();
    });
    $(".popup").live("mouseout", function () {

        $(this).next().close();
    });
});

Upvotes: 2

Views: 2133

Answers (1)

Nick Craver
Nick Craver

Reputation: 630597

Something like this will work:

$(function () {
  $(".popup").live("mouseover", function () {
    var dlg = $.data(this, 'dialog');
    if(dlg) dlg.dialog('open');
    else $.data(this, 'dialog', $(this).next().dialog());
  }).live("mouseout", function () {
    $.data(this, 'dialog').dialog('close');
  });
});

Why is it that complicated? Well the .dialog() call wraps the element and moves it to the end of the <body> element, so .next() won't find it anymore. So...we need to store a reference to the relevant dialog.

An alternative would be to position the dialog and stick it back in the DOM in a relative way when creating it, either way works.

Upvotes: 3

Related Questions