Question

I am working on this page: http://www.problemio.com/index_new.php

When you mouse over the “health” link, I got the popup to pop-up, but have a hard time getting it to close.

Here is what I did to make the popup show up:

$("<div id='pop'>" + div_contents + "</div>").dialog( { title: 'Secondary Categories'} );               

and here is how I am trying to make it close:

$('#hea_link').mouseout(function() 
{       
    $("#pop").dialog( 'close' );                
});

$('#hea_link').mouseleave(function() 
{       
    $("#pop").dialog( 'close' );                
});

Neither of the ways I am trying to get the popup to close works. Also, I have no idea why clicking the x on top-right of the popup doesn’t close it.

Any idea what I am doing wrong here?

Answer 1

You have a few problems:

Every time you hover over that link another <div id='pop'></div> is created. I would recommend creating the dialog up-front and showing/hiding/populating it as necessary:

Add the following HTML to your page:

<div id='pop' style='display:none'></div>

Then when the page loads (in document.ready or similar):

$("#pop").dialog({ autoOpen: false });

The other issue you have is that looking at your code, it looks like you’re only passing hover one function. That means that function will be executed on mouseenter and mouseleave. Pass two functions to hover:

$('#hea_link').hover(function() 
{       
    $("#pop").dialog( 'open' );                
},
function () 
{
    $("#pop").dialog("close");
});

Using hover this way means you don’t need a mouseout / mouseleave event listener either.

Example: http://jsfiddle.net/jNq9X/