Pop Up VisualForce page with Auto Close and Parent Refresh features

Building custom solutions in Salesforce you often need to use pop up window with embedded VisualForce page to support required functionality. You can use "modal dialog box" solution. But generally it's more complicated and required usage of heavy external javascript libraries

Let's say you want to create a custom button in layout to call Visual force page as a popup window. In most cases following two features will make final solution much more efficient and user friendly:

Auto Close the pop up if window lost the focus or click on Cancel button.
Without such feature pop up window will require manual close and new click to the button will create another pop up window. Which is confusing the end user.

Refresh Parent window after click on Save button.
If your Visual force page in pop up should update some date in parent cage (recalculate the field, update related list, etc.) you might want this feature. Without it parent SFDC page will stay AS IS as end user will have to refresh the page manually to see updated results.

Step 1: Create a Visual force page and controller
VF page: PopUpAutoCloseAndRefresh

<!-- 
Version      : 1.0
Company      : WebSolo Inc.
Date         : 03.2015
Description  : VF page "PopUpAutoCloseAndRefresh" 
History      :             
-->
<apex:page controller="PopUpAutoCloseAndRefreshContr" sidebar="false" showHeader="false"  >
    <div id="ch" style="display: none;">{!checkParam}</div>
    <script>
    window.onload = function(){  
        window.onblur = function(){
            window.close();
        }
        if(document.getElementById('ch').innerHTML == "Ok!")
        {
            window.opener.location.href="/{!$CurrentPage.parameters.id}";
            window.top.close();
        }
    }
    </script>
    <p style="font-size: 16px; font-weight: bold; margin-left: 10px">Pop Up Auto Close And Refresh Demo</p>
    <apex:form >
        <apex:pageBlock >
            <apex:pageMessage severity="info" strength="1" summary="{!messsage}" escape="false"/> 
            <apex:commandButton value="Close" action="{!CloseAndRefresh}"/>
        </apex:pageBlock>
    </apex:form>
</apex:page>

APEX Class: PopUpAutoCloseAndRefreshContr

/*
Version      : 1.0
Company      : WebSolo inc.
Date         : 03.2015
Description  : controller for VF page "PopUpAutoCloseAndRefresh"
History      :             
*/
public class PopUpAutoCloseAndRefreshContr{
    public String messsage {get;set;}
    public String checkParam {get;set;}
    public PopUpAutoCloseAndRefreshContr(){
        checkParam = 'not Ok!';
        messsage = 'Please click outside of the pop up window for Auto Close<br/>Please click  Close  to  see how parent window will be refreshed';
    }
    public PageReference CloseAndRefresh(){
        checkParam = 'Ok!';
    return null;
    }
} 

Step 2: Create a custom button (for target object) to call the VF page
Custom Button: CloseAndRefresh

Label: CloseAndRefresh
Object Name : YOUR OBJECT
Name: CloseAndRefresh
Behavior: Execute JavaScript
Display Type: Detail Page Button
OnClick JavaScript:
var url = "/apex/PopUpAutoCloseAndRefresh?id={!Opportunity.Id}"; 
var width = "520"; 
var height = "400"; 
window.open(url, '','scrollbars=no,resizable=no,status=no,toolbar=no,menubar=no, width=' + width + ',height=' + height + ',left=' + ((window.innerWidth - width)/2) + ',top=' + ((window.innerHeight - height)/2) );

Step 3: Add created custom button to layout.

To see how the provided example works in real solution please see out post "Custom Validation For Lead Conversion"