function readOnly(count){ }
Sign Up ›
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
Learn More

Browse by Topic
ShowAll Questionssorted byDate Posted
+ Start a Discussion
Salesforce@322Salesforce@322 

Creating vf page as popup in another visualforce page in salesforce

Hi,

Iam creating a vf page in that vf page i have a checkbox field when i check the checkbox automatically another vf page should be display as popup in my vf page.
Please help me guys,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,,
Best Answer chosen by Salesforce@322
praveen murugesanpraveen murugesan
Keerthi,

Here is the code,

<apex:page controller="PopupInVFpageController">
    
  
   <style>
.custPopup
{
    background: #fff ;
    border-width: 2px;
    border-style:inset;
    z-index: 9999;
    left: 720px;
    padding:10px;
    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: 650px; 
    margin-left: -250px;
    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:form id="theform">
     
  <apex:inputCheckBox value="{!checkBoxval}">
  <apex:actionsupport event="onchange" action="{!method}" rerender="tstpopup"/>
  </apex:inputCheckBox>
  </apex:form>

   <apex:outputPanel id="tstpopup" >
  <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopup==true}"/>
      <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopup==true}" >
    <apex:include pageName="PopUpMessage"/>    //the page name should be
    <p>Test After</p>
    <apex:form>

  <apex:commandButton value="close" action="{!closePopup}"/>
  </apex:form>

</apex:outputPanel>


  </apex:outputPanel>


</apex:page>
public with sharing class PopupInVFpageController {

    public PageReference closePopup() {
        displayPopup = false;
        return null;
    }

public boolean checkBoxVal{get;set;}
public boolean displayPopup{get;set;}

public pageReference method(){

system.debug('@@@@'+checkBoxVal);

if(checkBoxVal==true)
displayPopup = true;

system.debug('----@'+displayPopup );
return null;
}
}

Mark this as best answer if its helps.

Thanks.

All Answers

praveen murugesanpraveen murugesan
Hi Keerthi,

Try this,
<apex:page controller="xxxxx">
  <apex:form >
  
  
   <style>
.custPopup
{
    background: #fff ;
    border-width: 2px;
    border-style:inset;
    z-index: 9999;
    left: 720px;
    padding:10px;
    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: 650px; 
    margin-left: -250px;
    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:form>
 
  <apex:outputPanel id="tstpopup">
  <apex:outputPanel styleClass="popupBackground" layout="block"/>
      <apex:outputPanel styleClass="custPopup" layout="block" >
    <apex:include pageName="PopUpMessage"/>    //the page name should be
    <p>Test After</p>
</apex:outputPanel>
  </apex:outputPanel>

</apex:page>

Mark this as best answer if its helps.

Thanks.
Kamatchi Devi SargunanathanKamatchi Devi Sargunanathan
Hi Keerthi,

Based on your requirement, I have created a 2 VF along with one controller as follows,
  • CustomPOPUP -  Page that has the Checkbox, if Selected it shows a popup with the another page named 'AnotherPageOfCustomPOPUP'
  • CustomPOPupCon - is the Controller to show popup functionality
You can make the changes as you needed.

VF page CustomPOPUP:
<apex:page controller="CustomPOPupCon" showHeader="false">
   <!-- Popup styling ends here -->   
      <style type="text/css">    
        .custPopup{
            background-color: white;
            border: 1px solid#E5c130;
            border-radius: 4px;
             z-index: 9999;
            left: 50%;
            padding:10px;
            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: 250px;
            margin-left: -250px;
            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>
  <!-- Popup styling ends here -->

  <apex:form >
  <!-- Popup to show while an opportunity is created STARTING-->
   <apex:outputPanel id="tstpopup1" rendered="{!pop}">
      <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!pop}"/>
        <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!pop}">            
         <center> <apex:include pageName="anotherPageOfCustomPOPUP"/>
            <br/>
           <apex:commandButton value="Close" action="{!close}"/>
         </center>
        </apex:outputPanel>
      </apex:outputPanel>
   <!-- Popup to show while an opportunity is created ENDING-->
    <br/><br/><br/><br/><center>
       Click the checkbox to show another page in popup &nbsp;&nbsp;&nbsp;&nbsp;
       <apex:inputCheckbox value="{!chk}">
         <apex:actionSupport event="onclick"
                                action="{!showpop}"
                                rerender="frm1"/>
       </apex:inputCheckbox></center>
  </apex:form>
</apex:page>

Controller:
public class CustomPOPupCon
{
    public boolean pop{get;set;}
    public boolean chk{get;set;}

    public CustomPOPupCon()
    {      
        pop = false;
    }
    public void showpop()
    {
       if(chk == true)
       {
          pop = true;
       }
    }   
    public void close(){       
       pop = false;
    }
}

Another VF page AnotherPageOfCustomPOPUP
<apex:page >
  This is another vf page shown in POPUP...!
</apex:page>


Hope this helps you...!
Please give kudos and mark this answer as a Solution, if it really helps you.


Regards,
Kamatchi Devi R
Salesforce Certified Developer | Salesforce Certified Administrator
Salesforce@322Salesforce@322
Hi KamatchiDevi,

Thank you soo much  for your code i tried the same code but am not getting any popup in my vf page......................................
Salesforce@322Salesforce@322
Hi Praveen,

Thanks for your code,but it is the correct output i need checkbox field in vf page1 
after checking the field  vf page2 should display as popup on vf page1........
praveen murugesanpraveen murugesan
Keerthi,

Here is the code,

<apex:page controller="PopupInVFpageController">
    
  
   <style>
.custPopup
{
    background: #fff ;
    border-width: 2px;
    border-style:inset;
    z-index: 9999;
    left: 720px;
    padding:10px;
    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: 650px; 
    margin-left: -250px;
    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:form id="theform">
     
  <apex:inputCheckBox value="{!checkBoxval}">
  <apex:actionsupport event="onchange" action="{!method}" rerender="tstpopup"/>
  </apex:inputCheckBox>
  </apex:form>

   <apex:outputPanel id="tstpopup" >
  <apex:outputPanel styleClass="popupBackground" layout="block" rendered="{!displayPopup==true}"/>
      <apex:outputPanel styleClass="custPopup" layout="block" rendered="{!displayPopup==true}" >
    <apex:include pageName="PopUpMessage"/>    //the page name should be
    <p>Test After</p>
    <apex:form>

  <apex:commandButton value="close" action="{!closePopup}"/>
  </apex:form>

</apex:outputPanel>


  </apex:outputPanel>


</apex:page>
public with sharing class PopupInVFpageController {

    public PageReference closePopup() {
        displayPopup = false;
        return null;
    }

public boolean checkBoxVal{get;set;}
public boolean displayPopup{get;set;}

public pageReference method(){

system.debug('@@@@'+checkBoxVal);

if(checkBoxVal==true)
displayPopup = true;

system.debug('----@'+displayPopup );
return null;
}
}

Mark this as best answer if its helps.

Thanks.


This was selected as the best answer
Kamatchi Devi SargunanathanKamatchi Devi Sargunanathan
Hi Keerthi,

My code works fine in my account that's why Im sure abt this works for you.
I think you have a browser problem. So make sure javeascript has been enabled for your browser or not.

Regards,
Kamatchi Devi R
Salesforce Certified Developer | Salesforce Certified Administrator
Alo SenAlo Sen
Hi KamatchiDevi,
What is frm1 rerendering in the 4th last line of the CustomPOPUP page code?
Thank you.