Skip to content

Instantly share code, notes, and snippets.

@rotvulpix
Last active Mar 23, 2018
Embed
What would you like to do?
Dynamic (AJAX) Bootstrap Modal (Bootstrap 3)
$("[data-toggle='modal']").click(function(e) {
/* Prevent Default*/
e.preventDefault();
/* Parameters */
var url = $(this).attr('href');
var container = "#" + $(this).attr('data-container');
/* XHR */
$.get(url).done(function(data) {
$(container).html(data).modal();
}).success(function() { $('input:text:visible:first').focus() });
});
<!-- JS -->
<script src="caller.js"></script>
<!-- Link -->
<a href="/url/to/modal.html" data-toggle="modal" data-container='modal-container'>Abrir Modal</a>
<!-- Buenos Modales -->
<div id="modal-container"></div>
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<a class="close" data-dismiss="modal">&times;</a>
<h3>Title</h3>
</div>
<div class="modal-body">
<p>Content</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary" onclick="$('.modal-body > form').submit();">Save Changes</a>
<a class="btn" data-dismiss="modal">Close</a>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment