Bootstrap-SubModal

Add Sub-Modals to Bootstrap's Modals.

HTML

Sub modals are added to the .modal-body element of a modal. It's HTML structure is identical excluding the following two differences

• Sub Modals do not have a .modal-header element
• Sub Modals must have a class of .sub-modal (in addition to .modal)

<div class="modal hide fade">
    <div class="modal-header">[...]</div>
    <div class="modal-body">
    
        <!-- Your Sub Modal, requires sub-modal class -->
        <div class="modal sub-modal hide">[...submodal content...]</div>
        
        <p>[parent modal content]</p>
    </div>
    <div class="modal-footer">[...]</div>
</div>

This resembles Twitter Bootstrap's data API:

Opening

<a href="#mySubModal" class="btn" data-toggle="submodal">Open Sub Modal</a>

Closing

<a href="#mySubModal" class="btn" data-dismiss="submodal">Close Sub Modal</a>

// Open
$('#mySubModal').subModal('open');

// Close
$('#mySubModal').subModal('close');

// Toggle
$('#mySubModal').subModal('toggle');

// Before Modal is Shown
$('#mySubModal').on('beforeShow', fn);

// Modal Shown
$('#mySubModal').on('show', fn);

// Modal Closed
$('#mySubModal').on('hide', fn);

Known Issues

Currently, there is a nasty overflow issue that may take a while to fix. Please reference the issues list.

License

MIT, dawg.