Load an 'add page' screen in Modal frame (Lightbox), a kick-start example

24 februari, 2010 - 10:56 Joris Snoek

We are working on a Drupal project that uses a lot of dialog in Modal frame
This really awesome module provides a 'lightbox' feature, where you can load all content you want dynamicly. We especially use it for dialog screens, like:

Modal Frame Contrib Package

There also is a 'Modal Frame Contrib Package', this module package provides examples of how modal frame can be used in you Drupal websystem. The one example that I missed is: how to load a custom build form with form API. Or, for this example, how to load the 'add page' screen in Modal frame.

Here is howto

Create a new module that handles you coding like for example 'cst_modalframe_addpage'. For basics add three files:

cst_modalframe_addpage.info (define your module)
cst_modalframe_addpage.module (your allmighty code)
cst_modalframe_addpage.js

Then place the following code in 'cst_modalframe_addpage.module' file:

/**
 * Implementation of hook_init().
 * This is to load the modal frame for node/add/page
 */
function cst_modalframe_addpage_init() {
  if (!empty($_COOKIE['has_js']) && $_GET['q'] == 'node/add/page') {
    modalframe_child_js();
  }
  if ($_GET['q'] == 'dummypage'){ // optional: only load the script on certain page  when needed
    modalframe_parent_js();
    drupal_add_js(drupal_get_path('module', 'cst_modalframe_addpage') .'/cst_modalframe_addpage.js');    
  }
}

In cst_modalframe_addpage.js, place the following code

(function ($) {
 
Drupal.behaviors.modalFrameFilterTips = function(context) {
  $('a[href$="node/add/page"]:not(.dummyclass-not)', context).addClass('dummyclass').click(function() {
    Drupal.modalFrame.open({url: $(this).attr('href'), width: 800, height: 600});
    return false;
  });
};
 
})(jQuery);

Off course, this is just a start that hopefully gives you a kickstart to coding such cases.
Because, for example, when you save the page: your whole site layout will load into the modalframe. You can solve this by altering the form redirect to a custom page that is loaded correct in modalframe.

Lucius BV: open source concept en realisatie