jQuery ModalDialog with iFrame

Using iFrames can sometimes be really helpful. Especially if you have information which should be served on several pages.

A simple solution using the jQuery UI dialog with iFrames in APEX is the following:

Add a class called callModalDialog to each of your links which should be opened in a modal dialog (referenced by an iFrame).

Example link:
<a class="callModalDialog" href="f?p=&APP_ID.:1000:&SESSION.::">Information about something</a>

Example when you have a link inside an APEX report:
Column Attributes > Column Link > Link Attributes: class="callModalDialog"

Now create a new dynamic action:

Event: Click
Selection Type: jQuery Selector
jQuery Selector: .callModalDialog

Action: Execute JavaScript Code
Execute on Page Load: No
Code:

/* prevent default behavior on click */
var e = this.browserEvent;
e.preventDefault();
/* Trigger JQuery UI dialog */
var horizontalPadding = 30;
var verticalPadding = 30;
$('<iframe id="modalDialog" src="' + this.triggeringElement.href + '" frameborder="no" />').dialog({
   title: "Information about something",
   autoOpen: true,
   width: 900,
   height: 600,
   modal: true,
   draggable: false,
    resizable: false,
   close: function(event, ui) { $(this).remove();},
   overlay: {
       opacity: 0.2,
       background: "black"}
}).width(900 - horizontalPadding).height(600 - verticalPadding);
return false; 

This solution takes the URL of your link and adds it to the iFrame inside the UI dialog.