Jquery Colorbox Modal Window in Visualforce Page

Displaying a modal dialog with jQuery is easy. But what happens if you want to display that modal dialog within a visualforce page? Or what if you want to show the contents of a visualforce page inside the dialog? How can you deal with the cross domain issue if you want to, for example, close the popup once some logic is executed?

In this post I will explain how to display a modal dialog on a visual page by clicking a detail page button. In order to do this I will use “Jquery Colorbox”, a simple but powerful library that will provide different variety of Colorbox.


Visualforce Page Code Using Command Link :

  <apex:page >   
  <!-- Style Sheet For Colorbox -->    
  <apex:stylesheet value="{!URLFOR($Resource.Colorboxcss, 'colorbox.css')}"/>   
  <apex:pageBlock mode="maindetail">   
  <apex:form >   
  <!-- Here we are using class to call javascript or we can use diffrent javascript function  
 Note: href is referencing to another VF Page which needs to be open in Modal Window   
  -->    
  <a class="openModalBox" href="/apex/ModalPopup"> Open Modal Popup </a>   
 <!-- Calling Java Script Using Apex Command Button or Link -->  
 <apex:commandLink oncomplete="openColorBox()"  value=" Open Modal Popup 2"/>  
  </apex:form>   
  </apex:pageBlock>   
  <!-- Jquery Librarys -->    
  <apex:includeScript value="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"/>   
  <apex:includeScript value="{!$Resource.Colorboxjs}"/>   
  <script>   
 <!-- Calling link Using Action -->   
 function openColorBox()  
 {  
 $.colorbox({iframe:true, href:'/apex/ModalPopup', innerWidth:340, innerHeight:290 , width:"90%", height:"80%", overlayClose : false ,escKey :false ,fixed :true });  
 }  
 <!-- Calling link Using Class Attribute -->   
  $(document).ready(function(){   
  $(".openModalBox").colorbox({iframe:true, innerWidth:640, innerHeight:390 , width:"90%", height:"80%", overlayClose : false ,escKey :false ,fixed :true });   
  });   
  </script>   
  </apex:page>   

Static Resource : Click Here to download (Extract Zip and Create Two  Static Resource One for Java Script and Other of CSS)

Using Colorbox Link to explore more functionality from colorbox : Jquery Colorbox

                                                                Happy Coding !!