jQuery Thickbox

A jQuery thickbox allows you to create a popup region without actually opening a new browser window or tab. The thickbox region can contain some content already on the page, usually hidden when the page is viewed normally, or the content of another page.

Before starting you must have included the jQuery library in your APEX application. For instructions on how to do this check the guide Integrating jQuery into APEX

Once you have jQuery installed successfully you must also download the specific files for the thickbox, these can be retrieved from jquery.com/demo/thickbox/. Download the javascript, css files.

Include the javascript and css files in your application using the following code

<script type="text/javascript" src="#WORKSPACE_IMAGES#thickbox.js"></script>
<link rel="stylesheet" href="#WORKSPACE_IMAGES#thickbox.css" type="text/css">

To use the thickbox to display an existing region do the following

Create a region with "No template" and place the following in the region header

<div id="thickbox_region" style="display:none;">

And close the div in the footer

</div>

Now create some content in the region to give the thickbox some content. For example I will create two items, P2_TEXT and P2_DATE. These items are purely dummy content.

Next, create a region to hold the buttons that will launch the thickbox region. This region does not require any specific settings.

Finally create the button that will launch this region. First create a button with the default regions, then once the button has been created alter the following settings.

For the optional URL redirect enter

javascript:return false;

And for the button attributes enter

class="thickbox" alt="#TB_inline?height=300&width=400&inlineId=thickbox_region"

You will notice from the alt tag that you can alter the width and height settings for the tickbox. For details of other settings visit jquery.com/demo/thickbox/

Now when you run the page and click the button the thickbox region should appear like the following example.

To view the above example click here