My requirement is when we click on login button in visulforce page open modal window page in that page we need to enter first name,last name and then click save button then close modal window page save details.


2 Answers 2


Here are the steps to create a modal popup through Apex/Visualforce:

Step 1 - Login to your Salesforce.com develer account

Step 2 - Click "Setup" in the upper right corner

Step 3 - Under the App Setup section (left menu), expand Develop

Step 4 - Click on Apex Classes

Step 5 - Click the "New" button to create a new Apex Class

Step 6 - Add the following source and click the "Save" button. (we'll walk through what this does in a moment).

public class tstpopup {     

    public boolean displayPopup {get; set;}     

    public void closePopup() {        
        displayPopup = false;    
    public void showPopup() {        
        displayPopup = true;    


Step 7 - Click on Pages (below Apex Classes on the left menu)

Step 8 - Create a new Visualforce page by clicking the "New" button

Step 9 - For the purpose of this tutorial I used "tstpopup" for my Label & Name

Step 10 - Enter the Visualforce Markup code below and click "Save" (we'll walk through what it all means in a moment). Download full tstpopup Visualforce Markup source

<apex:page controller="tstpopup">
    <apex:form >
        <apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="tstpopup"/>
        <apex:pageBlock >
            This is just filler text from the Salesforce General. 

        <apex:outputPanel id="tstpopup">
        <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopUp}"/>
            <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopUp}">
                This is where I would put whatever information I needed to show to my end user.<br/><br/><br/>
                <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="tstpopup"/>


    <style type="text/css">
            background-color: white;
            border-width: 2px;
            border-style: solid;
            z-index: 9999;
            left: 50%;
            position: absolute;
            /* These are the 3 css properties you will need to change so the popup 
            displays in the center of the screen. First set the width. Then set 
            margin-left to negative half of what the width is. You can add 
            the height property for a fixed size pop up if you want.*/
            width: 500px;
            margin-left: -250px;
            opacity: 0.20;
            filter: alpha(opacity = 20);
            position: absolute;
            width: 100%;
            height: 100%;
            top: 0;
            left: 0;
            z-index: 9998;


Step 11 - Now, to view the finished page, you'll need to go up to the browser address bar and navigate to the apex directory in your Salesforce.com account and type in the page name. For me, that is the following.

just try googling before asking here !!! first link only is your answer!!

Refrence : http://www.salesforcegeneral.com/salesforce-modal-dialog-box/


  • please correct the reference URL it has some extra character at the end.
    – Saroj Bera
    Sep 16, 2015 at 6:53
  • i don't think so saroj...the url is getting open on click Sep 16, 2015 at 6:57
  • Earlier the URL was inside square bracket and the end bracket was part of the URL thats why it was not working, any way you have fixed it.
    – Saroj Bera
    Sep 16, 2015 at 6:59
  • actually #martin fixed that...thanx martin ... and thank you saroj Sep 16, 2015 at 7:04
  • thanks kapoor but my requirement is when we click on popupbutton, i want to open another visualforce page in the modal popup.
    – user24734
    Sep 16, 2015 at 7:04

You can also use below simple javascript to open a VisualForce page in a new window.

<apex:outputLink   onclick="openPopup('{!$Page.PageDemo}','somevalue');">

    function openPopup(page,param){
        window.open(page+'?param='+param,'_blank', 'width=800,height=500,left=200,top=5,scrollbars,toolbar=0,resizable')

Another way to write

    <script type="text/javascript">
    function popupwindow(){
        var newwindow = window.open('/apex/CallReportDataComponentPage','Call Report'); 

<apex:commandButton action="{!InvokeCallReport}" value="Generate Report" onclick="popupwindow"/>

You must log in to answer this question.

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