Create Multi-level Bootstrap Modals Using jQuery Submodal.js
File Size: | 10.4 KB |
---|---|
Views Total: | 10367 |
Last Update: | |
Publish Date: | |
Official Website: | Go to website |
License: | MIT |
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.