The Case of the Missing "Close" Button on a JQuery Tools Overlay

I have a button on a page that may or may not be there. When I clicked the button, I wanted a JQuery Tools Overlay to pop up with some information and links. Because the button may or may not be there, I had to create the overlay programatically. I found information on doing so here: http://flowplayer.org/tools/demos/overlay/trigger.html So, on my page, I created a div for the overlay as such:

And, in the function called by the button's on click event, I added this:

 $('#interp_pool_div').html(doctor_selection);
 $('#interp_pool_div').overlay({
            oneInstance: false,
            mask: '#dcdcdc',
            effect: 'apple',
           });
               
         $("#interp_pool_div").overlay().load();

This worked well, except for one thing - the close button didn't appear the second time that I opened the overlay. Also, I was a but worried about memory leaks caused by repeatedly creating the overlay. It turns out that because I was putting the data directly in the overlay div, the second time it ran, it was overwriting the html for the close button. So, the answer was to put a second div inside the overlay div and then load the content into that one. I also but a simple check around the code that creates the overlay to avoid creating it a second time. So, the final working code appears as such: In the HTML:

In the JavaScript, outside the onclick function:

 var overlay_exists = false;

In the function called by the button click:

$('#interp_data').html(doctor_selection);
                              
if(overlay_exists === false){
     $('#interp_pool_div').overlay({
          oneInstance: false,
          mask: '#dcdcdc',
           effect: 'apple',
           
         });
         overlay_exists = true;
}
$("#interp_pool_div").overlay().load();