-
-
Save mxub/3236116 to your computer and use it in GitHub Desktop.
Dynamic (AJAX) loaded Bootstrap Modal (Bootstrap 2.0)
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $(document).ready(function() { | |
| // Support for AJAX loaded modal window | |
| $('.btn-modal').click(function() { | |
| $.get($(this).attr('data-target'), function(data) { | |
| $('#modal_window').html(data); | |
| $('#modal_window').modal('show'); | |
| }, 'html'); | |
| }); | |
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <script src="js/jquery.min.js"></script> | |
| <script src="js/bootstrap.min.js"></script> | |
| <script src="js/custom.js"></script> | |
| <link href="css/bootstrap.css" rel="stylesheet"> | |
| <!-- Modal window to load dynamic content --> | |
| <div class="modal hide" id="modal_window"></div> | |
| </head> | |
| <body> | |
| <!-- Uses btn-model class to indicate an AJAX loaded modal, and data-target as the source --> | |
| <a class="btn btn-modal" data-target="modal_window.htm">Launch Modal</a> | |
| </body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="modal-header"> | |
| <a href="#" class="close js-dismiss">×</a> | |
| <h3>Modal header 2</h3> | |
| </div> | |
| <div class="modal-body"> | |
| <p>One body...</p> | |
| </div> | |
| <div class="modal-footer"> | |
| <input class="btn primary" type="submit" value="Save Changes" /> | |
| <a href="#" class="btn js-dismiss">Close</a> | |
| </div> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment