Add submodals to Bootstrap 3.x modals
JavaScript CSS
Switch branches/tags
Nothing to show
Clone or download
Latest commit 2b3eff3 Jan 30, 2015
Permalink
Failed to load latest commit information.
demo engrish Oct 15, 2014
dist misc bower updates Oct 15, 2014
src v2.0 commit Oct 15, 2014
.bowerrc v2.0 commit Oct 15, 2014
.gitignore v2.0 commit Oct 15, 2014
.jshintrc v2.0 commit Oct 15, 2014
Gruntfile.js misc bower updates Oct 15, 2014
README.md Update README.md Jan 30, 2015
bower.json misc bower updates Oct 15, 2014
package.json v2.0 commit Oct 15, 2014

README.md

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>

## 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);

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.