Bootstrap modal in joomla 3.1

Question

How to use Bootstrap modal in Joomla 3.1 ? I have Bootstrap loaded and when I try to initialise

 $('#confirmDelete').modal();

my modal window I get $(...).modal is not a function

Answer 1

Easiest way I have found is to use the data attribute, data-toggle="modal". An example would be:

<a href="#my-modal" data-toggle="modal" class="btn">Launch modal</a>

Answer 2

If someone is looking for loading external url in Bootstrap Modal window in Joomla 3 below code will help-

$name = "myModal";
$html = '<a href="#modal-' . $name.'" data-toggle="modal" class="btn">Launch modal</a>';
$params = array();
$params['title']  = "test";
$params['url']    = "http://localhost/";
$params['height'] = 400;
$params['width']  = "100%";
echo $html .= JHtml::_('bootstrap.renderModal', 'modal-' . $name, $params);

Answer 3

If you need a modal link to an external page, not run on pageload but only when you click the link. You can use this:

JHtml::_('behavior.modal');  

and

<a href="index.php?option=com_yourcomponent&tmpl=component" class="modal" rel="{handler: 'iframe', size: {x: 600, y: 450}}">your link</a>