How to show/hide div from imagemap inside jquery window?

I have created a rollover imagemap to show cuts of beef. When the user clicks on a section of beef, a div becomes visible that will list recipes, via the js/popupbox.js script.

All the basic scripts are working here (click on the "Chuck" section)

But first the imagemap of the cow opens in a jquery modal window (I'm new to jquery, may be referring to that wrong!). The Problem: my show/hide div ceases to work inside of the jquery window.

I have considered using a tooltip script instead, but it's essential that the us开发者_如何学编程er be able to open/close the div themselves by clicking, because there will be recipes and other content inside each div that they will need to able to click on.

Any help greatly appreciated!

You need to attach an event handler to the dialog using the open event.

$('#opener').click(function() {
    $('#dialog').dialog({
        modal: true,
        height: 550,
        width: 800,
        hide: "explode",
        open: function() {
            $(this).click(function() {
                $('#popupbox').show();
            });   
        }
    });
});

Working example: http://jsfiddle.net/f55gg/