New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/submodal/
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);
