Using Salesforce standard modal in a Detail page button - Part 2

As illustrated in Part 1, we looked at opening the modal which come with Salesforce and changing its content.

But most of the time, you want the content in the JavaScript detail button to be dynamic. So instead of writing a lot of JavaScript code and encoding the HTML content into a string to then pass it to the setContentInnerHTML function, we could display a Visualforce page.

You just need to modify it as below and change the source (src attribute).

box.setContentInnerHTML(
  '<iframe src="/apex/modaldemo" style="border:none;" width="100%" height="'+ (height - 30)+'px" />'
);

We have now added a Visualforce page, which is kind of awesome. But what if we want to some processing and at the end close the modal from within the Visualforce page?

Well, this is not possible since you don't have access to the modal instance in the Visualforce page.
Fortunately we do have an alternative way which is the use of postMessage.

How does it work? 
First we need to the Visualforce page to send the message once the action is done. Which can be a click on button, a progress bar reaching 100%, an action function which has completed or many other scenarios. 

You just need to execute the following JavaScript code:

window.parent.postMessage('close', '*');

Now we need to capture this message from the JavaScript on the button and then close the modal. Here is how we do it. 

window.addEventListener('message', function(event){
  if (event.data === 'close'){
    box.hide();
  }
});

Below is the full implementation: 


Hope you like it. :)