You need to sign in to do that
Don't have an account?
SS 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
Can anyone tell me how to create custom popup window in visualforce with sample code
Thanks in advance
Karthick
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
You can find detailed instructions on how to create a popup or modal window here:
http://www.salesforcegeneral.com/salesforce-modal-dialog-box/
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;
}
}
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.
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