PopUp in visual force page

Question

I am new in Salesforce...I want to design a pop up window. The window will appear after save button is hit which will show the values those an user has entered as input. After the pop up comes out then the user will click the ok in pop up and the page will be redirected to the object view page.

Now how can I implement it throgh java script or any other possible way. Can u pls provide some sample coding for it.

Thanks in advance.

Answer 1

In visualforce pages it is very easy to create a pop up window using apex,here is some piece of that may help you tto create a pop up window in visualforce :

Command Button to open popup:

<apex:commandButton value="Add Media" action="{!createContent}" rerender="popup"/>

Here is the popup that will be open after clicking the button -

<apex:outputPanel id="popup">
<apex:outputPanel styleClass="customPopup" layout="block" rendered=" {!displayPopUp}"id="firstpopup">
   <apex:pageBlock title="Add Media Files">
       <apex:pageBlockButtons>
        <apex:commandButton value="Show in Content Library"action="{!chatterPost}"/>
        </apex:pageBlockButtons>
       <iframe src='https://api.cincopa.com/v2/upload.iframe?api_token={!ApiKey}&rrid=sf:{!sObjName}:{!productID}'style='height: 390px;width:100%;' id='frame'allowfullscreen='allowfullscreen'>
       </iframe>
    </apex:pageBlock>
    <apex:commandLink value="X" action="{!closePopup}" styleClass="close" rerender="popup"/>
 </apex:outputPanel>
 </apex:outputPanel>

Some css for better UI -

<style type='text/css'>
.customPopup{
    background-color: lightgrey;
    border-style: solid;
    border-radius: 10px;
    border-width: 1px;
    left: 55%;
    position: fixed;
    padding: 5px;
    box-shadow: 0px 3px 7px rgba(1, 1, 1, 5);
    background: #fff;
    width: 600px;
    margin-left: -200px;
    top: 10px;
    max-width: 700px;
}
.customPopup .close{
    position: absolute;
    top: 10px;
    right: 10px;
    transition: all 200ms;
    font-size: 20px;
    text-decoration: none;
    color: #333;
}
.customPopup .close:hover{
    color: red;
}
</style>

I hope it will help you.
Regards,
Ajay

Answer 2

Hi Demon ,Try given example
closePopup is the method to close the popup when clicking on cut button:

public void closePopup(){
  displayPopup = false;
  displayinnerPopup=true;
 }

DisplayPopup is a boolean variable which decide that the popup will be hidden or shown. Same for showPopup method :

public void showPopup(){
  displayPopup = true;
  displayinnerPopup =false;
 }

The iframe is the inner frame which opens in the popup.There is no need to put iframe tag.You can customize the popup as you need.

Regards,
Ajay