Original Bootstrap Modal

Please see Bootstrap Document.

Generate Modal Launch Link

If we need a link or button to call this modal, using:

echo \Windwalker\Helper\ModalHelper::modalLink('Link title', 'myModal');

This code will generate a link to launch #myModal. We can set some style, for example, add class in option params:

echo \Windwalker\Helper\ModalHelper::modalLink('Link title', 'myModal', array('class' => 'btn btn-mini'));

The result:

<a data-toggle="modal" data-target="#myModal" class="btn btn-mini">Link Title</a>

Available options

$option = array(
    'tag'       => 'a' ,
    'id'        => 'myModal_link',
    'class'     => '',
    'onclick'   => '',
    'icon'      => ''
);

Dynamic Modal Content

We can wrap our content in a modal box:

$content = 'Some text or HTML.' ;
echo \Windwalker\Helper\ModalHelper::renderModal('myModal', $content, $option);

This will generate a modal box HTML link the begin of this page.

Title & Footer

$option = array(
    'title'     => '',
    'footer'    => ''
);

If we don't add these two option, the reault will link below:

<div class="modal hide fade" id="myModal">
    <div id="myModal-container" class="modal-body">
        Some text or HTML.
    </div>
</div>

But we can add title and footer to modal box:

$content = '<input name="number" />' ;
$option['title'] = 'Choose A Number' ;
$option['footer'] = '<a href="#" class="btn">Close</a>
                    <a href="#" class="btn btn-primary">Save changes</a>' ;

echo \Windwalker\Helper\ModalHelper::renderModal('myModal', $content, $option);

The new result:

<div class="modal hide fade" id="myModal">
    <div class="modal-header">
        <button type="button" role="presentation" class="close" data-dismiss="modal">x</button>
        <h3>Choose A Number</h3>
    </div>

    <div id="myModal-container" class="modal-body">
        <input name="number" />
    </div>

    <div class="modal-footer">
        <a href="#" class="btn">Close</a>
        <a href="#" class="btn btn-primary">Save changes</a>
    </div>
</div>

Found a typo? Help us improve this document.

This document is for Windwalker Joomla RAD, if you are finding Windwalker PHP framework, please see: Windwalker Framework