Display Modal Dialog on Custom Button ( Standard Page Layout )

Question

Is it possible to display a modal dialog upon clicking a custom button on standard page layout ?

Example of a modal dialog that we want to be displayed is shown below.

Do we need to any javascript framework or jquery for this or is this possible via standard javascript ?

Answer 1

Yes this is doable.

When button is clicked you can open a jQuery modal and display a vf page embedded inside an Iframe, which will contain all your details.

We will have to use the window.postMessage to pass events from VF page (Hosted over visual.force.com) and Standard Page (Hosted over salesforce.com)

https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

var j$ = jQuery.noConflict();
var j$modalDialog = j$('<div></div>') 
.html('<iframe id="iframeContentId" src="' + iframe_url + '&parent_domain=' + parent_domain + '" frameborder="0" scrolling="auto" height="100%" width="100%" marginheight="0" marginwidth="0" scrolling="no" />') 
.dialog({ 
    autoOpen: false, 
    title: 'Support Merge Fields', 
    resizable: false, 
    width: 700, 
    height: 500, 
    autoResize: true, 
    modal: true, 
    draggable: false 
}); 

j$modalDialog.dialog('open');

Here is a detailed article mentioning all steps http://www.valnavjo.com/blog/modal-dialog-on-a-standard-salesforce-page/