Add submodals to Bootstrap 3.x modals
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>
$ npm install
$ npm run-script bower
$ npm run-script build
# For watching
$ npm run-script build-watch
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>
## Data Attributes
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>
## JS API
// Show
$('#my-submodal').submodal('show');
// Hide
$('#my-submodal').submodal('hide');
// Toggle
$('#my-submodal').submodal('toggle');
## Events
// 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);
There are some things to note when upgrading to the v2.0 version
- Only supports Bootstrap 3.x
- The
subModal
namespace has been renamed tosubmodal
Currently, there is a nasty overflow issue that may take a while to fix. Please reference the issues list.
MIT, dawg.