Hi all.

I'm having a problem with a JScrollpane panel containing trigger links to JQuery UI Dialogs. 

As anyone familiar with JScrollpane will probably know, the plugin uses JavaScript DOM manipulation to create two nested divs. There's an inner div with the class "jspPane" that comprises the scrolling element, and an outer container div with the class "jspContainer" that acts as a window through which the scrolling content is viewed. The overflow property of the inner "jspPane" div is set to "visible" and that div is set to auto-resize to accommodate whatever content, while the outer "jspContainer" div is set to scroll along the x or y axis (or both) as specified in its JavaScript initialization. 

Now in my page, I have a JScrollpane containing some graphical icons that trigger JQuery UI Dialogs. Here's a screenshot of the page element: 

The triangular icon is the trigger to a JQuery UI Dialog. 

The problem I'm having is that when the JQuery UI Dialogs are auto-generated by the plugin, they appear in the markup nested within the "jspPane" div of the JScrollpane widget instead of displaying on top of the JScrollpane as a dialog ought. This causes a scrollbar to appear, the bottom portion of the dialog being hidden beneath the bottom edge of the "jspContainer" div. The user must then scroll the JScrollpane widget in order to view the full content of the dialog box. 

Here's what happens when the dialog box trigger is clicked:

You can see that instead of the dialog box floating free on top of the page, it is being displayed within the context of the JScrollpane widget, getting cut off at the bottom and expanding the scrollpane to necessitate a scrollbar. 

Now I've tried adjusting the z-index of the dialog, to no avail. The problem appears predicated on the overflow property of the container div in which the JQuery dialog is embedded. 

Is there any way to initialize a JQuery Dialog box outside of the parent div of its trigger link?