Create a Modal Popup in Salesforce

When we develop our requirements, sometimes we need to show a popup for some operations. To solve this problem we develope the things using visualforce page and apex controller. So let’s start with the procedures to show the popup on visualforce pages.

seebelow

Setup -> Visualforce Pages -> new

Put following code :

<apex:page controller="popupClass"> 
  <apex:form> 
    <apex:commandButton value="Show" action="{!showPopup}" rerender="tstpopup"/> 
    <apex:outputPanel id="tstpopup"> 
      <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/> 
      <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}"> 
        <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="tstpopup"/> 
      </apex:outputPanel> 
    </apex:outputPanel> 
  </apex:form> 
  <style type="text/css"> 
    .custPopup{ background-color: white; border-width: 2px; border-style: solid; z-index: 9999; left: 50%; padding:11px; position: absolute; width: 600px; margin-left: -240px; top:100px; } 
    .popupBackground{ background-color:black; opacity: 0.20; filter: alpha(opacity = 20); position: absolute; width: 100%; height: 100%; top: 0; left: 0; z-index: 9998; } 
  </style> 
</apex:page>

 

Following are steps to create apex class:

Setup -> Apex Classes -> new

Put following code :

public class popupClass {
  public boolean displayPopup {get;set;} 
  public void closePopup() 
    { displayPopup = false; } 
  public void showPopup() 
    { displayPopup = true; } 
}

Following is the output of above-written code :

popup-3

When you click on ‘Show’ button :

popup-2

Thanks

1 Comment
  1. Salesforce | Srinivas
    Srinivas 5 months ago

    Hi Satyakam Singh,

    Thanks for your blog,

    It will more helpful for Developers or Learners to implement the same on any custom object.

    in pop up show input field value.(I feel that is more tricky and we can learn from experts like you).

Leave a Reply

CONTACT US

We're not around right now. But you can send us an email and we'll get back to you, asap.

Sending

About Us

Forcetalks is a Salesforce collaboration platform for coders & developers, geeks & nerds, consultants & business heads, admins & architects, managers & marketers and of course the business owners. A community where you can learn from, where you can contribute to. For you. For Salesforce. Read More...

Copyright 2018 Forcetalks. All Right Reserved.

Log in with your credentials

or    

Forgot your details?