function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
SS KarthickSS Karthick 

Creating Custom Popup Window

Hi Folks,
       Can anyone tell me how to create custom popup window in visualforce with sample code



Thanks in advance
Karthick
Best Answer chosen by SS Karthick
Raja ReddyRaja Reddy
Hope this helps you.....

VF PAGE:


<apex:page standardController="Contact" extensions="PopupAlertController">
    <apex:form >
         <apex:pageBlock >
                  <apex:commandButton value="show Popup Alert" 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:selectRadio value="{!Contact.Email}"> </apex:selectRadio><p/>
                        <apex:selectRadio value="{!Contact.Phone}"> </apex:selectRadio><p/>
                    <apex:selectRadio value="{!Contact.Email}"> </apex:selectRadio><p/>
                </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 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 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>


APEX CLASS:
public with sharing class PopupAlertController
{
    public Boolean displayPopup {get;set;}
    public PopupAlertController (ApexPages.StandardController controller)
    {
  
    }
    public void showPopup()
    {
        displayPopup = true;
    }
    public void closePopup()
    {
         displayPopup = false;
    }
    public List<SelectOption> getItems()
    {
    List<SelectOption> options = new List<SelectOption>();
    options.add(new SelectOption('US','US'));
    options.add(new SelectOption('CANADA','Canada'));
    options.add(new SelectOption('MEXICO','Mexico')); return options;
    }
    public PageReference redirectPopup()
    {
    displayPopup = false;
    //Please uncomment below 3 statements and replace YourObjectId
    PageReference p=new Pagereference('/');
    p.setRedirect(true);
    return p;
    }
}

All Answers

KevinPKevinP
Karthick, 

You can find detailed instructions on how to create a popup or modal window here:
http://www.salesforcegeneral.com/salesforce-modal-dialog-box/
Raja ReddyRaja Reddy
Hope this helps you.....

VF PAGE:


<apex:page standardController="Contact" extensions="PopupAlertController">
    <apex:form >
         <apex:pageBlock >
                  <apex:commandButton value="show Popup Alert" 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:selectRadio value="{!Contact.Email}"> </apex:selectRadio><p/>
                        <apex:selectRadio value="{!Contact.Phone}"> </apex:selectRadio><p/>
                    <apex:selectRadio value="{!Contact.Email}"> </apex:selectRadio><p/>
                </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 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 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>


APEX CLASS:
public with sharing class PopupAlertController
{
    public Boolean displayPopup {get;set;}
    public PopupAlertController (ApexPages.StandardController controller)
    {
  
    }
    public void showPopup()
    {
        displayPopup = true;
    }
    public void closePopup()
    {
         displayPopup = false;
    }
    public List<SelectOption> getItems()
    {
    List<SelectOption> options = new List<SelectOption>();
    options.add(new SelectOption('US','US'));
    options.add(new SelectOption('CANADA','Canada'));
    options.add(new SelectOption('MEXICO','Mexico')); return options;
    }
    public PageReference redirectPopup()
    {
    displayPopup = false;
    //Please uncomment below 3 statements and replace YourObjectId
    PageReference p=new Pagereference('/');
    p.setRedirect(true);
    return p;
    }
}
This was selected as the best answer
Neena BainsNeena Bains

Here is a quick and easy pop-up that will display every time you load the object record. Create a Visualforce page with the following content:

<apex:page standardController="PUT THE OBJECT API Name HERE, FOR EXAMPLE My_Custom_Object__c">

<script> alert('This is my pop-up text.'); </script>

</apex:page>

Then, go to the page layout and add the Visualforce page you created. Set the height and width to zero.

Rahavan Arumugam AlameluRahavan Arumugam Alamelu
Hi ,

I have a visualforce page which displays the table of data. On the top i have commandlink, on click of which the modal/popup window should open. 

Followed the above code given by Raja Reddy. The block is displaying in the same page at the top of the page. I want the popup to be opened in the seprate window. 

Can someone advise on urgent basis. 

Thanks
</script>
<body onload="setPopUpSize()">
<apex:form id="lookup">
<!--<apex:sectionHeader title="System Lookup"/> !-->
<apex:commandLink style="font-weight: 500;color:#000;padding-left:15px;font-size:1.0em;text-decoration:underline" action="{!gotoCase}">Return To Case</apex:commandLink> 
<apex:commandLink style="font-weight: 500;color:#000;padding-left:15px;font-size:1.0em;text-decoration:underline" action="{!showpopup}" rerender="popuppanel,systemblock"> Clear Selected System </apex:commandLink>
<apex:outputPanel id="popuppanel">
<!--<apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displaypopup}">-->
<apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displaypopup}">
Unselect the system <br/><br/>
<apex:commandButton value="Clear" action="{!closePopup}" rerender="popuppanel"/>
<!--/apex:outputPanel>-->
</apex:outputPanel>
</apex:outputPanel>

<apex:outputPanel id="systemblock" layout="block">
<apex:pageblock >
<span style="font-size: 1.3em;font-weight:bold">System Lookup - {!accName}</span>
<!--<font weight="bold">
<apex:facet name="header"/></font> -->
<apex:pageblockTable id="sysdetailstable" value="{!SystemDetails}" var="sys">
<apex:column style="width:30px;">
--
--- columns in the table
---