Twitter Boostrap Modal lets you load content only from any Drupal URL or specific function on a Twitter Bootstrap Modal.

This module relies on Twitter Bootstrap Modal functionality, so you need to load Twitter Boostrap libraries with at least modals included.

AJAX functionality is handled by jQuery AJAX load module.

Instalation

  1. Download an enable jQuery AJAX load module.
  2. Download and enable this module.
  3. Add Twitter Bootstrap libraries either by using Bootstrap library module or a Bootstrap theme.
  4. Set jQuery classes to trigger modal.
  5. Add trigger classes (by default .jquery_ajax_load_TB) to links you want to enable as modal trigger.
  6. Only Bootstrap 3.x. (See next note) If modal template needs to be loaded, add .bs_modal class to modal trigger.

Bootstrap 3.x

On Booststrap 3.x remote content is loaded into .modal div. That means that the content must carry all the modal classes: dialog, content, header, body and content.

So this module will give you the chance to loaded the content "as is" if you want more flexibility, for example, in the case of forms or Display Suite view modes, where you can manage the markup. In this case you need to define all the modal classes or your modal will appear broken.

If you want the remote content to come with full modal markup, just add the class .bs_modal to modal trigger.

Blocks on Modal

The sub module Twitter Bootstrap Modal Blocks, open any block on a modal. The block is replaced by a Button on its same location.

Boostrap Carousel

The sub module Twitter Bootstrap Modal Carousel, builds a Bootstrap Carousel of target images of an image gallery.

  • Actually it loads the destination image resized, it is not loading image styled images.

Tutorial

Nivo Slider

The sub module Twitter Bootstrap Modal Nivo, builds a Nivo Slider of target images of an image gallery.

The module is on a beta stage, it could be carefully used on production sites.

  • Some Nivo transition effects does not work.
  • Actually it loads the destination image resized, it is not loading image styled images.

Mantainers of this theme:

Hatuhay

Sponsored by:

Development Factory Group

Modal theming

The modal HTML is build on twitter_bootstrap_modal_modal.tpl.php file, you can include this file on your own theme and customize it. Be aware that modal ID and specific Twitter Bootstrap classes should not be modified. New variables can be included, but the basic HTML is build before rendering modal content, so on only callback content could be rendered and only inside modal body.

Project information

Releases