Thursday 30 July 2015

Custom Popup in Salesforce | Visualforce page

Please check below link for live demo

Class Should be:

public with sharing class CustomPopupController {

    public boolean showPopup {get;set;}
    public CustomPopupController ()
        showPopup = false;
    public PageReference openPopup()
        showPopup = true;
        return null;
    public PageReference Cancel()
        showPopup = false;
        return null;


Page Should be:-

<apex:page controller="CustomPopupController">
<style type="text/css">
        opacity: 0.20;
        filter: alpha(opacity = 20);
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        z-index: 9998;
        background-color: white;
        border-width: 2px;
        border-style: solid;
        z-index: 9999;
        left: 50%;
        position: absolute;
        width: 500px;
        margin-left: -250px;

<apex:form >
 <apex:pageBlock > 

 <apex:commandButton action="{!openPopup}" value="Open Popup" />
 <apex:outputPanel id="tstpopup" rendered="{!showPopup}">
                <apex:outputPanel styleClass="popupBackground" layout="block" />
                    <apex:outputPanel styleClass="custPopup" layout="block" >
                              Hello this is Custom pop-Up<BR></BR>
                             <apex:commandButton value="Save"  action="{!Cancel}" />
                             <apex:commandButton value="Cancel" action="{!Cancel}" />


Please let us know if this will help you

Amit Chaudhary


  1. Hi AMit,

    can we open a visualforce page from an apex method withoud any button click .
    FOr example, I click on a button on a standard account detail page and the button calls an apex the apex method inserts some contacts ..and after inserting it we need to open up a visualforce page

    if (response.getBody() == '{}')

    public static PageReference opennewvf()
    System.Debug('External Id unavailable');
    PageReference vfPage1 = new PageReference('apex/MyVf');
    return vfPage1;

  2. How to modal contact object when hitting "add contact" button in which there are two field FirstName and lastName. in this model there are two button save and cancle when clicking save then save the record and when clicking cancle then cancle modal