Create Multi-level Bootstrap Modals Using jQuery Submodal.js

jQuery Submodal.js is a jQuery plugin extending Bootstrap Modal component that allows the visitors to open another modal window in a current opened modal window.

How to use it:

1. Include the necessary jQuery library and Bootstrap 3 framework in the document.

<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css" rel="stylesheet" >

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>

2. Include jQuery Submodal.js plugin's JavaScript and CSS in the document.

<linkhref="dist/bs.sm.css" rel="stylesheet">
<script src="dist/bs.sm.js"></script>

3. Create a sub modal for your Bootstrap modal.

<div class="modal submodal" id="my-submodal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-body">
        Sub modal content goes here
      </div>
      <div class="modal-footer">
        <button class="btn btn-default" data-dismiss="submodal" aria-hidden="true">Cancel</button>
        <button class="btn btn-danger" data-dismiss="submodal">Close Account</button>
      </div>
    </div>
  </div>
</div>

4. Create a button/link to toggle the sub modal.

<a href="#my-submodal" class="btn btn-default" data-toggle="submodal">Click me</a>

5. Public methods.

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

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

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

6. Available events.

$('#my-submodal')
  .on('beforeShow', function() { // do something })
  .on('show', function() { // do something })
  .on('beforeHide', function() { // do something })
  .on('hide', function() { // do something });

---

This awesome jQuery plugin is developed by jakiestfu. For more Advanced Usages, please check the demo page or visit the official website.