How to create popup by clicking a custom button in a standard page layout in Salesforce?

1. Add the below .zip file in Static Resources.

Click this link to download the file jQueryForPopup.


2. Create a Custom button with On Click Java script functionality.


Java script code for button:

{!REQUIRESCRIPT('/soap/ajax/26.0/connection.js')}
{!REQUIRESCRIPT('/js/functions.js')}
{!REQUIRESCRIPT('/resource/jQueryForPopup/jQuery/jquery-1.8.2.min.js')}
{!REQUIRESCRIPT('/resource/jQueryForPopup/jQuery/ui/jquery-ui-1.9.1.custom.min.js')}
{!REQUIRESCRIPT('/resource/jQueryForPopup/jQuery/postmessage/jquery.ba-postmessage.js')}
{!REQUIRESCRIPT('/resource/jQueryForPopup/jQuery/bbq/jquery.ba-bbq.min.js')}
requireCssFile('/resource/jQueryForPopup/jQuery/ui/css/ui-lightness/jquery-ui-1.9.1.custom.min.css');
function requireCssFile(filename)
{
var fileref = document.createElement('link');
fileref.setAttribute('rel', 'stylesheet');
fileref.setAttribute('type', 'text/css');
fileref.setAttribute('href', filename);
document.getElementsByTagName('head')[0].appendChild(fileref);
}
var j$ = jQuery.noConflict();
var iframe_url = '{!URLFOR("/apex/Sample")}';
var child_domain = iframe_url.substring(0, iframe_url.indexOf('/', 9));
var parent_domain = window.location.protocol + '//' + window.location.host;
var j$modalDialog = j$('<div id="opppopup"></div>')
.html('<iframe id="iframeContentId" src="' + iframe_url + '" frameborder="0" height="100%" width="100%" marginheight="0" marginwidth="0" scrolling="no" />')
.dialog({
autoOpen: false,
title: 'Sample Popup',
resizable: true,
width: 800,
height: 540,
autoResize: true,
modal: true,
draggable: true
});

j$modalDialog.dialog('open');


3. Add the Custom button created to the page layout and check the popup.


24 comments:

  1. There was an Error.....A problem with the OnClick JavaScript for this button or link was encountered:

    jQuery is not defined

    ReplyDelete
    Replies
    1. Check whether in your static resources you have added the jQuery zip file mentioned in the 1st step.

      Cheers!

      Delete
    2. i added the static resources jQuery zip file....but in which place i just use this static resource i mean jQuery zip file.....and i have one doude regarding content type.....here i have static resource jQuery Content type is "application/octet-stream" and u have diffrent content type....so that's problem or diffrent one......

      Delete
    3. ok please follow the above same willdo like that i am getting

      Delete
  2. One of the best resources for salesforce I came across.. Thanks very much for this.. Cheers!!!
    In addition i was showing this on service console on contact detail page with the id of the record being passed.
    Find the same below. Might help someone someday.
    if (sforce.console.isInConsole())
    var iframe_url = '{!URLFOR("/apex/AuthenticateCustomer")}'+'isdtp=vw&id='+'{!Contact.Id}';
    else{
    var iframe_url = '{!URLFOR("/apex/AuthenticateCustomer")}'+'?id='+'{!Contact.Id}';
    }

    ReplyDelete
  3. Hi Magulan, thanks for the sample code!

    Was wondering if it would be possible to implement a 'Cancel' button on the iframe VF page (next to the "Validate" button, for example) that uses the same functionality as the "X" close button? I can't get it quite right, either it's closing the entire page (including the parent page that originally called the popup) or it's closing just the iframe.

    Thanks again

    ReplyDelete
    Replies
    1. Similarly, how would you have the "Validate" button close the pop-up and direct to a new page?

      Delete
    2. Hi any solution to this yet?

      Delete
    3. This site explains what you're after
      http://www.valnavjo.com/blog/modal-dialog-on-a-standard-salesforce-page/

      Delete
  4. Is there a way to add Cancel button inside the iframe of this popup??
    I am stuck on this actually

    ReplyDelete
    Replies
    1. Hi any solution to this yet?

      Delete
    2. this site explains what you're after
      http://www.valnavjo.com/blog/modal-dialog-on-a-standard-salesforce-page/

      Delete
  5. HI,
    How to call the apex method when we click the validate button.

    ReplyDelete
    Replies
    1. Write a apex class, incorporate with the VF page and then using action attribute, you can call the apex method.

      Cheers!!!

      Delete
    2. Question 1: I have Put the button in the vf page and load into the pop(Ifram). when click that buttonfrom that VF page, the current popup should close How to do this?

      Question 2: I have implemented the following code in to the .html.

      .html('')

      Kindly guide me how to call the apex method in that button.

      Note: Am new so please provide the code snippet.

      Delete
    3. Code is not visible here so i have posted in following stackoverflow
      http://salesforce.stackexchange.com/questions/44474/how-to-call-the-apex-form-the-javascript-popup#44474

      Delete
    4. In apexpage, use controller="TestMethod".

      Cheers!!!

      Delete
  6. good example but i want to know how to create createElement(apex:inputText) in javascript function

    ReplyDelete
  7. Hi,

    Well explained to open a popup, But now neither its getting close & nor refreshing the parent window after click save button. Could you please explain which code will go into the VF page. to achieve this.

    i have already gone through below site but it does`t help
    http://www.valnavjo.com/blog/modal-dialog-on-a-standard-salesforce-page/

    Thanks,

    ReplyDelete
  8. hi, if u not used the Jquery or java script. are we write v.f page? its possible or not.

    ReplyDelete
  9. hi, if u not used the Jquery or java script. are we write v.f page? its possible or not.

    ReplyDelete
  10. Awesome, this is really helpful! Thank you

    ReplyDelete
  11. how to change the color to blue

    ReplyDelete