I have a VF page with couple of buttons. I need to show a popup when one of the buttons is clicked. Something like a modal popup where user has to fill in something or click the cancel button in the popup page before to go back to the calling page.



Lets assume i would need to have lookup for contact in VF page and if the contact is not there then we need to create a new contact record. So i am kind of trying to create a contact record from the same page by just clicking a button which in turn displays the fields of contact and save of it creates the contact record.So the user doesnt need to go away from this page to create the new contact record.

5 Answers 5


weve used this before: http://www.tehnrd.com/visualforce-pop-up/ but that aside.

If you are using a lookup window to find a contact, what about creating a custom lookup window to which you add a "create contact" button. Use the create button to replace the lookup content with new contact fields right in that window, simple as re-rendering the page using render flags. That way its in keeping with standard salesforce UX and your users will possibly embrace the custom functionality more easily.

The only moderately difficult part is getting the selection back from the child lookup window to the parent.

These functions go on the parent VF page:

function openPopupFocus(a, b, c, d, e, f, g, k) {

    if (f) {
        if (lastMouseX - c < 0) 
            lastMouseX = c;
        if (lastMouseY + d > screen.height) 
            lastMouseY -= lastMouseY + d + 50 - screen.height;
        lastMouseX -= c;
        lastMouseY += 10;
        e += ",screenX=" + lastMouseX + ",left=" + lastMouseX + ",screenY=" + lastMouseY + ",top=" + lastMouseY

    curPopupWindow = window.open(a, b, e, false);

    if (k) 
        closeOnParentUnloadWindow = win

function closePopup() {
    if (closetimer) {
        closetimer = null
    if (curPopupWindow != null) {
        try {
            if (curPopupWindow.confirmOnClose) if (curPopupWindow.confirm(curPopupWindow.confirmOnCloseLabel)) {
                curPopupWindow.confirmOnClose = false;
                return false
        } catch (a) {}
        curPopupWindow = null

function doLookupPick(a,b,c,d){

the link to open the window

  openPopupFocus(%27/apex/<VF PAGE NAME>?filter=item%27, %27CCBCCLookup%27, 420, 490, %27width=420,height=490,toolbar=no,status=no,directories=no,menubar=no,resizable=yes,scrollable=no%27, true);

This function goes on the custom lookup page:

function sendToParent(selectedId,selectedName){

        top.window.opener.doLookupPick(<hidden field dom id>,
                                         <selected sfObject ID>,
                                         <text input field dom id>',
                                         <text input contact name>);

  • i love this idea. I dont think this was what was on my mind.. But its a wonderful way to resolve my problem.. Thanks a ton
    – Prady
    Commented Aug 9, 2012 at 3:44

We use a jQuery plugin to implement an iFrame, or alternatively, a modal containing an iframe with twitter bootstrap. This is for the more complex case that you want to show another VF page with it's own instantiation of a controller, etc.


This is psuedo-code, you need to play with the combination of JS, actions, and page layouts, css to get your settings correct to make them appear fluid. If your still stuck let me know.

Start by creating a VF page that uses the standardcontroller for a contact record:

Page (mymodalpage.page):

<apex:page standardController="Contact" showHeader="false" sidebar="false" extensions="contactExtensions">
<script type="text/javascript">
     // javascript to close dialog, when the page posts back after the 
     // save, you'll have '{!closeDialog}' set to 'true' which will close the dialog.
<apex:form target="_self">
<apex:pageBlock title="Create Contact" mode="edit" id="thePageBLock">
    <apex:pageBlockButtons >
            <apex:actionSupport event="onclick" rerender="thePageBlock"/>
        <apex:commandButton action="{!saveAndClose}" value="Save"  />
        <apex:commandButton action="{!cancel}" onclick="parent.dialog.dialog('close');return false;" value="Cancel" />
        <apex:commandButton value="Cancel"/>
        <!-- this is where you would place your input fields for contact -->

Controller (contactExtension.cls):

public class contactExtension{
   Contact c {get; set;}       
   ApexPages.StandardController controller {get; set;}
   Public Integer closeDialog {get; set;}
   public contactExtension(Apexpages.standardcontroller controller){
      controller = cntrl; //pass the standard controller into your extension
      c = controller.getRecord();  
      closeDialog = false;

   public PageReference saveAndClose(){
      closeDialog = true;
      c.save();  // call the standard save 
      return null;

Example (parent page):

<button onclick="javascript: displayAndOpenModal();">Open Modal</button>
  <div class="modal hide" id="myModal">
  <div class="modal-header">
    <button type="button" class="close" data-dismiss="modal">×</button>
    <h3>Modal header</h3>
  <div class="modal-body">
    <p><iframe src="{!URLFOR($Page.mymodalpage)}" id="my-modal-iframe" /></p>
  <div class="modal-footer">
    <a href="#" class="btn" data-dismiss="modal">Close</a>
    <a href="#" class="btn btn-primary">Save changes</a>

Modal Source: http://twitter.github.com/bootstrap/javascript.html#modals

  • Updated the question
    – Prady
    Commented Aug 8, 2012 at 15:14

Here's a dated but nice Visualforce tutorial that uses a hidden-DIV approach as opposed to actually rendering JavaScript popups: Tutorial: Modal Dialogs in Visualforce using the Yahoo! User Interface Library.


You might also look at BlockUI, a great modal plugin for jQuery. Here's a blog post on using it with VF:



Navigate to this JQuery UI Modal:


and use

$( ".selector" ).dialog({ modal: true });

You must log in to answer this question.

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