jQuery ModalDialog with iFrame
Von Tobias Arnhold →
10.30.2013
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:
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.
