Submodal

Download Demo
Submodal – Add submodals to Bootstrap 3.x modals
1. INCLUDE CSS AND JS FILES

<link rel="stylesheet" type="text/css" href="./components/bootstrap/dist/css/bootstrap.min.css">
<link type="text/css" rel="stylesheet" href="bs.sm.css">
<script type="text/javascript" src="./components/jquery/dist/jquery.js"></script>
<script type="text/javascript" src="./components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="bs.sm.js"></script>

2. 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>

3. JAVASCRIPT

// Open
$('#my-submodal').submodal('open');

// Close
$('#my-submodal').submodal('close');

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

4. 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);