Friday, April 6, 2012

Modal Page goes ColorBox

I'm excited to announce the 2.0 release of the SkillBuilders Modal Page plug-in. The first version used some code borrowed from Super LOV to display the modal. While it helped get the plug-in out quickly it had some issues in older versions of IE (6 and 7). Having said that, I believe the implementation of the plug-in has worked quite well.

The big news in this release is a transition over to ColorBox! ColorBox is a lightweight customizable lightbox plugin for jQuery by Jack Moore. The great thing about ColorBox is that it was made to work well with iframes so it plays nice with older versions of IE. Just check out our demo page to see how much better the modal dialogs look!

Of course there are some other nice enhancements as well. Here's a summary:
  • Moved to ColorBox over jQuery UI Dialog for the modal display
  • New  resize method added
  • New events added
    • Auto Close
    • Manual Close
    • Close (new)
    • Start Open (new)
    • End Open (new)

Also, have a look at the example on our Super LOV demo page. That's an example of how Super LOV can be combined with Modal Page for some really cool functionality! I'll be sure to blog on how to do that ASAP!

Hope you like the new version!


  1. This comment has been removed by the author.

  2. Looks nice. I'm currently using your previous modal page plugin and we are having an issue with the title bar not expanding to the full width of the modal on IE7/8. So it likes like this new version will solve that problem but I'm not sure I'm too keen to have the title bar and close button at the bottom of the modal - will it be an option to display it at the top as normal?

  3. Al,

    There are 5 included themes. The themes come directly from the ColorBox website at

    Themes 1, 4, and 5 place the title on the bottom. Themes 2 and 3 place the title on the top. The plug-in allows you to reference a custom CSS file if you choose to create one. Please see the documentation at


  4. hi sir,
    i m trying to use the modal page plugin with theme blue bilder but its not working i dont know why its not working , only two scrollbar is visible the whole page is not visible can u please tell me what is the problem and on which themes its work


  5. Akram,

    Have you seen this:

    If that doesn't work please set up a demo on and email me developer credentials.


  6. Hello Dan ,
    I tried to make modal page with skillbuilder plugin v2.2 but it is not doing any thing. I am using Apex Delta theme . So please can you help me how to use this plugin ?


  7. Afif,

    There is no version 2.2, not yet anyway. Have you watched this?

    If you need more help please set up a demo on and email me developer credentials.


  8. Hi Dan!!

    I am using Skillbuilder 2.2 and following all steps as in your video for modal page in APex 4.2. It works well but I am facing problem when I try to update any existing record after updating the one record successfully(that is once report region is refreshed I can not update another one until I refreshes the report page).

    when I update existing record first time the modal page works OK and refreshes report region successfully while clicking on "Aplly Changes".
    Once the report region is refreshed, all the edit link of the report page becomes disable until I refresh the whole page again and updation of further record will be available only after refresh of the whole page rather than refresh of the report region.

    So, just I want to know is what can be the problem from my end?

  9. Tushar,

    Look again at the video starting at 16:40.