Modal Contrib Module

By default Drupal does not uses modals. However there are contrib modules that let you use modals.

You may want to use Modal Forms module if you only need modals for:

  • Log in (modal_forms/nojs/login)
  • Request new password (modal_forms/nojs/password)
  • Create new account (modal_forms/nojs/register)
  • Contact (modal_forms/nojs/contact)
  • Comment (modal_forms/%ctools_js/comment/reply/%node)
  • Webform (modal_forms/%ctools_js/webform/%node)

How to create your custom modal

If you need modals in other situations you might find the following information useful.

1. Dependencies

Although it might seem useless to mention make sure you have ctools installed:
description = An example module for creating modal windows using the CTools framework.
core = 7.x
dependencies[] = ctools
??>

2. The page, and the callback function content

Define a Page:
* Implements of hook_menu()
*/
function custom_modal_menu() {
$items['custom-modal/%ctools_js'] = array(
'title' =?> 'My Custom Modal',
'page arguments' => array(1),
'page callback' => 'custom_modal_page',
'access callback' => TRUE,
'type' => MENU_NORMAL_ITEM,
);
return $items;
}
?>
For the sake of example, my modal does not contain any information, just a sample message. This is where you will add the content you want this modal to display.
* A modal static page callback.
* @param $js
* boolean CTools determination whether the user's browser is javascript enabled.
* @return
* string The contents of the node, that will fill the modal window.
*/
function custom_modal_page($js = NULL) {
if ($js) {
// Required includes for ctools to work:
ctools_include('modal');
ctools_include('ajax');
}
$title = 'My Modal Title';
$content = 'Testing my modal content here';
return ctools_modal_render($title, $content);
}
??>

3. Define your modal style

Here you can setup your modal style. Check ctools modal example for more settings.
Pay attention to 'modalTheme' => 'custom_modal' because you will need this information in the JavaScript template file of this modal.
* Add modal support on the page where you want to enable this functionality
*/
function _custom_modal_modal_settings() {
// Include the CTools tools that we need.
ctools_include('ajax');
ctools_include('modal');
// Add CTools' javascript to the page.
ctools_modal_add_js();

// Create our own javascript that will be used to theme a modal.
$modal_style = array(
'custom-modal-style' =?> array(
'modalSize' => array(
'type' => 'fixed',
'width' => 600,
'height' => 240,
'addWidth' => 10,
'addHeight' => 10,
'contentRight' => 0,
'contentBottom' => 0,
),
'modalOptions' => array(
'opacity' => .6,
'background-color' => '#684C31',
),
'animation' => 'fadeIn',
'modalTheme' => 'custom_modal',
),
);
// Add the settings array defined above to Drupal 7's JS settings:
drupal_add_js($modal_style, 'setting');
// The function below assumes the custom_modal.js file resides in [module_dir]/js
ctools_add_js('custom_modal', 'custom_modal');
}
?>
And here comes the custom_modal.js file that has to be placed in your module folder under /js
* Provide the HTML to create the modal dialog.
*/
(function ($) {
Drupal.theme.prototype.custom_modal = function () {
var html = '';
html += '

';
html += '
';
html += '

';
html += '

';
html += '

';
html += '';
return html;
};
})(jQuery);
?>

4. Your modal link

For this example we simply create a block that only shows the link that opens this modal.
Make sure you call the function that defines your modal whenever you want the link to be present.
* Implements hook_block_info().
*/
function custom_modal_block_info() {
$blocks = array();
$blocks['custom_modal_block_with_link'] = array(
'info' =?> t('Custom Modal Block with Link'),
'cache' => DRUPAL_NO_CACHE,
);
return $blocks;
}

/**
* Implements hook_block_view().
*/
function custom_modal_block_view($block_name = '') {
switch ($block_name) {
case 'custom_modal_block_with_link':
$block['title'] = t('Click me for a modal');
// add support for modal
_custom_modal_modal_settings();
$link_name = 'Click Me';
$href = 'custom-modal/nojs';
$modal_link = ctools_modal_text_button($link_name, $href, t('Click Me'), 'ctools-modal-custom-modal-style');
$block['content'] = $modal_link;
return $block;
break;
}
}
?>

This example is inspired from this other example, that uses the same principles but is adapted for views:
http://drupion.com/blog/10-steps-creating-ctools-modal-window-drupal-7

Tags: 
modal form

Comments

Please use this with care specially when you are using together with other modules that do a redirect after clicking on the submit button of the popup window, like for example after login (for example the legal module).

Since its using AJAX you will get all the content of the HTML with HTTP 200 OK code and all the content of the page in a Javascript Alert window.

In order to fix this use the $_GET['destination'] variable instead of the drupal_goto() function.

For more view this issue on drupal.org http://drupal.org/node/1872630

Also consider reading this blogpost about how to use drupal_goto
http://federicojm.com/en/blog/drupalgoto-evil