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/