Submodal

Add submodals to Bootstrap 3.x modals

Installing

You can install Submodal via bower

$ bower install submodal

Then include the JS and CSS in your page.

<link type="text/css" rel="stylesheet" href="bs.sm.css">
<script type="text/javascript" src="bs.sm.js"></script>

Building

$ npm install
$ npm run-script bower
$ npm run-script build

# For watching
$ npm run-script build-watch

HTML

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

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

<div class="modal">
    <div class="modal-dialog">
         <div class="modal-content">
            <div class="modal-header">[...]</div>
            <div class="modal-body">

                <!-- Your Sub Modal, requires sub-modal class -->
                <div class="modal submodal">[...submodal content...]</div>

                <p>[parent modal content]</p>
            </div>
            <div class="modal-footer">[...]</div>
        </div>
    </div>
</div>

This resembles Twitter Bootstrap's data API:

Opening

<a href="#my-submodal" class="btn" data-toggle="submodal">Open Submodal</a>

Closing

<a href="#my-submodal" class="btn" data-dismiss="submodal">Close Submodal</a>

// Show
$('#my-submodal').submodal('show');

// Hide
$('#my-submodal').submodal('hide');

// Toggle
$('#my-submodal').submodal('toggle');

// Before submodal is shown
$('#my-submodal').on('beforeShow', fn);

// After submodal is shown
$('#my-submodal').on('show', fn);

// Before submodal is hidden
$('#my-submodal').on('beforeHide', fn);

// After submodal is hidden
$('#my-submodal').on('hide', fn);

Upgrading

There are some things to note when upgrading to the v2.0 version

• Only supports Bootstrap 3.x
• The subModal namespace has been renamed to submodal

Known Issues

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

License

MIT, dawg.