In my custom Edit page, I have a button where the user can select records and make them child records. As the edit page and the selection page must work on the same record they are currently implemented in wizard-style (multiple pages with the same controller and state).

As the selection page actually is more a dialog than a standalone page I thought about displaying it as a modal dialog on top of the edit page using something like jQuery UI.

I found many tutorials but most of them were quite old or used "risky" technologies like iframes and the like.

How would you build this today? Or are they good reasons to not use JS-based modals at all?

3 Answers 3


This is how i solved it using the SimpleDialog solution from @Uwe Heim.


  • Load dialog page with apex:include in a display:none outputPanel
  • Use SimpleDialog.importContentNode() instead of SimpleDialog.setHtml() to reuse DOM instead of copying it.
  • declaration of a global JS variable for the dialog to close it from the other VF page
  • Use of the same StandardController to share state (Wizard-style) between the two pages

Parent page:

<apex:page standardController="MyObject__c" ctrlExt="EditCtrlExt">

        <apex:outputPanel style="display:none">
            <apex:include pageName="dialogPage" id="dialogPage" />

        <script type="text/javascript">
            var dialog;

            function openPartsSelector() {
                dialog = new SimpleDialog("SD"+Dialogs.getNextId(), false);    

            // Note: Overwrite standard behavior
            function setFocusOnLoad() { 
                // do nothing

Dialog page:

    <apex:page standardController="MyObject__c" ctrlExt="DialogCtrlExt">
        <apex:commandButton value="Ok" action="{!doStuff}" onClick="dialog.hide()" />
        <apex:commandButton value="Cancel" onClick="dialog.hide()" />

In visualforce there seems to be no buildin way to create JS modal dialogs.

I think the old-school basic approach was to create modal patterns by rerouting via pageRef like a wizard. Keeping data in the viewstate, the outcome should be usable. But not very nice.

Personally my first choice would be jquery-ui. $(...).dialog({}); is pretty cool and except of the considerable small footprint in respect of resource-consumption, I see no real downside in using it within visualforce. Usually I have jquery-ui already loaded for other reasons.

Additionally, I found that there is an not officially supported function in main.js which let's you create a modal dialog in the salesforce-style:

function SimpleDialog(id, isMovable)

I didn't used it, but others seems to be happy with it: https://developer.salesforce.com/forums?id=906F000000097vaIAA - for sure, it's not best practice to use it, but due to my experience the changes in the salesforce markup and js happens so slowly that if it works once, it'll probably will do it for years.

  • The SimpleDialog solution workes great for me and is much easier and looks better than the JQuery UI solution. I keep this question unanswered for some days to invite more insight. After that I will make you Nr.1. ;-) Commented Aug 7, 2014 at 10:07
  • I posted the (important parts of) my code in an extra answer here. Commented Aug 7, 2014 at 12:36

I was able to pull this off without using an external page:

                <apex:facet name="header">Date</apex:facet>
                <apex:input type="date" value="{!session.start_date}" onchange="updateSessionDate(this.value,{!tableIndex}), openIcrementDateModal();" />

        <apex:actionFunction name="updateSessionDate" reRender="sessionsPanel">
            <apex:param name="selectedDate" value="" assignTo="{!selectedDate}" />
            <apex:param name="tableIndex" value="" assignTo="{!selectedIndex}" />

<script type="text/javascript">
    var dateModal;
    function openIcrementDateModal() {
        dateModal = new SimpleDialog("SD"+Dialogs.getNextId(), false);
        dateModal.setTitle("Increment Dates");
<apex:outputPanel style="display:none">
    <apex:outputPanel id="incrmentDateModal" layout="block">
        <p>Click OK to increment the dates below this one...</p>
        <p>Or click Cancel to just change this date.</p>
        <apex:commandButton value="Ok" action="{!updateSessionDate}" onClick="dateModal.hide()" reRender="sessionsPanel" />
        <apex:commandButton value="Cancel" onClick="dateModal.hide()" />

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .