1

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.

  • 1
    Hi @Demontrax, Can you please post the code for what you've tried till now? It's recommended to ask specific questions(which you've already given a shot and still face an issue) rather than asking for code to do something. – SE_User Apr 11 '17 at 6:16
  • 1
    r you using standard page-layout or it is custom visualforce Page?? – Avijit Das Apr 11 '17 at 6:18
2

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

  • Hi ajay. It is not working without controller methods. Could you please tell me how to write code for {! displayPopup} and {!closePopup} And what is iframe in that? – Demon trax Apr 11 '17 at 6:48
1


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

  • Hey Thanx Ajay. Its working :) – Demon trax Apr 11 '17 at 10:29
  • Hi Demon, Thanks for selecting my answer as a best answer. It's my pleasure to help you!! – Ajay Dubedi Apr 13 '17 at 8:00

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.