Toggle Side Panel
Close search

Activity › Forums › Salesforce® Discussions › How to create popup from Visualforce page?

Tagged: , , ,

  • Himanshu

    Member
    April 14, 2016 at 9:07 AM

    <apex:page standardController="Contact" extensions="TestPopup">

    <apex:form >
    <apex:pageBlock >
    <apex:commandButton value="show popup" action="{!showPopup}" rerender="popup" status="status"/>

    <apex:outputPanel id="popup">

    <apex:outputPanel id="popInnerOutputPnl" styleClass="customPopup" layout="block" rendered="{!displayPopUp}">
    <apex:commandButton value="X" title="Close the popup" action="{!closePopup}" styleClass="closeButton" rerender="popup">
    </apex:commandButton>
    <apex:pageblockSection >

    <apex:pageblockSectionItem >
    <apex:outputLabel value="Email" for="address"></apex:outputLabel>
    <apex:inputField id="address" value="{!Contact.Email}"/>
    </apex:pageblockSectionItem>
    </apex:pageblockSection>
    <apex:commandButton value="Ok" action="{!redirectPopup}" styleClass="closeButton" rerender="popup">
    </apex:commandButton>
    </apex:outputPanel>
    </apex:outputPanel>

    </apex:pageBlock>

    </apex:form>

    <style type="text/css">
    .customPopup {
    background-color: white;
    border-style: solid;
    border-width: 2px;
    left: 20%;
    padding: 10px;
    position: absolute;
    z-index: 9999;
    /* These are the 3 css properties you will need to tweak so the pop
    up 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 also add
    the height property for a fixed size pop up.*/
    width: 500px;
    top: 20%;
    }

    .disabledTextBox {
    background-color: white;
    border: 1px solid;
    color: black;
    cursor: default;
    width: 90px;
    display: table;
    padding: 2px 1px;
    text-align:right;
    }

    .closeButton {
    float: right;
    }
    </style>
    </apex:page>

    public with sharing class TestPopup {

    public Boolean displayPopup {get;set;}

    public TestPopup(ApexPages.StandardController controller) {

    }

    public void showPopup()
    {

    displayPopup = true;
    }

    public void closePopup() {
    displayPopup = false;

    }

    public PageReference redirectPopup()
    {
    displayPopup = false;
    //Please uncomment below 3 statements and replace YourObjectId
    // PageReference p=new Pagereference('/'+YourObjectId);
    // p.setRedirect(true);
    // return p;

    }
    }

     

    Hope this helps you.

  • Suyash

    Member
    April 19, 2016 at 5:51 AM

    Hello,

    Have a look into the following code:

    <apex:page controller="popup">
    <apex:form >
    <apex:commandButton value="Show Pop up" action="{!showPopup}" rerender="popup"/>
    <apex:outputPanel id="popup">
    <apex:outputPanel styleClass="customPopup" layout="block" rendered="{!displayPopUp}" id="firstpopup" >
    firstpopup <br/>
    <apex:commandButton value="Hide Pop up" action="{!closePopup}" rerender="popup"/>
    <apex:commandButton value="show inner Pop up" action="{!showinnerpopup}" rerender="firstpopup"/>
    <apex:outputPanel styleClass="ccustomPopup" layout="block" rendered="{!displayinnerPopUp}" id="innerpopup">
    innerpopup <br/>
    <apex:commandButton value="Hide inner Pop up" action="{!closeinnerpopup}" rerender="firstpopup"/>
    </apex:outputPanel>
    </apex:outputPanel>
    </apex:outputPanel>
    </apex:form>
    <style type="text/css">
    .customPopup{
    background-color: lightgrey;
    border-style: solid;
    border-width: 1px;
    left: 65%;
    padding:10px;
    position: absolute;
    z-index: 999;

    width: 500px;
    margin-left: -250px;
    top:100px;
    .ccustomPopup{
    background-color: lightgrey;
    border-style: solid;
    border-width: 1px;
    left: 65%;
    padding:10px;
    position: absolute;
    width: 100px;
    margin-left: -250px;
    top:100px;}</style></apex:page>

     

    Its controller:

     

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

    }
    public void showinnerpopup() {
    displayinnerPopup = true;
    }
    public void closeinnerpopup() {
    displayinnerPopup =false;
    }
    }

    • This reply was modified 9 years, 9 months ago by  Suyash.

  • Parul

    Member
    September 20, 2018 at 12:23 AM

    Hello,

    Refer the following code:

    <apex:page standardController=”Contact” extensions=”TestPopup”>

    <apex:form >
    <apex:pageBlock >
    <apex:commandButton value=”show popup” action=”{!showPopup}” rerender=”popup” status=”status”/>

    <apex:outputPanel id=”popup”>

    <apex:outputPanel id=”popInnerOutputPnl” styleClass=”customPopup” layout=”block” rendered=”{!displayPopUp}”>
    <apex:commandButton value=”X” title=”Close the popup” action=”{!closePopup}” styleClass=”closeButton” rerender=”popup”>
    </apex:commandButton>
    <apex:pageblockSection >

    <apex:pageblockSectionItem >
    <apex:outputLabel value=”Email” for=”address”></apex:outputLabel>
    <apex:inputField id=”address” value=”{!Contact.Email}”/>
    </apex:pageblockSectionItem>
    </apex:pageblockSection>
    <apex:commandButton value=”Ok” action=”{!redirectPopup}” styleClass=”closeButton” rerender=”popup”>
    </apex:commandButton>
    </apex:outputPanel>
    </apex:outputPanel>

    </apex:pageBlock>

    </apex:form>

    <style type=”text/css”>
    .customPopup {
    background-color: white;
    border-style: solid;
    border-width: 2px;
    left: 20%;
    padding: 10px;
    position: absolute;
    z-index: 9999;
    /* These are the 3 css properties you will need to tweak so the pop
    up 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 also add
    the height property for a fixed size pop up.*/
    width: 500px;
    top: 20%;
    }

    .disabledTextBox {
    background-color: white;
    border: 1px solid;
    color: black;
    cursor: default;
    width: 90px;
    display: table;
    padding: 2px 1px;
    text-align:right;
    }

    .closeButton {
    float: right;
    }
    </style>
    </apex:page>

    public with sharing class TestPopup {

    public Boolean displayPopup {get;set;}

    public TestPopup(ApexPages.StandardController controller) {

    }

    public void showPopup()
    {

    displayPopup = true;
    }

    public void closePopup() {
    displayPopup = false;

    }

    public PageReference redirectPopup()
    {
    displayPopup = false;
    //Please uncomment below 3 statements and replace YourObjectId
    // PageReference p=new Pagereference(‘/’+YourObjectId);
    // p.setRedirect(true);
    // return p;

    }
    }

     

    Hope this helps you.

  • shariq

    Member
    September 20, 2018 at 7:49 PM

    Hi,

    Note -

    Use java script rather using apex side  as it is fast.

    Hope this helps.

Log In to reply.

Popular Salesforce Blogs