Skip to content

Instantly share code, notes, and snippets.

@nextroy
Forked from drewjoh/custom.js
Created June 27, 2012 12:42
Show Gist options
  • Save nextroy/3003866 to your computer and use it in GitHub Desktop.
Save nextroy/3003866 to your computer and use it in GitHub Desktop.
Dynamic (AJAX) loaded Bootstrap Modal (Bootstrap 2.0) : Fix for removing the response Modal content
$(document).ready(function() {
// Support for AJAX loaded modal window.
// Focuses on first input textbox after it loads the window.
$('[data-toggle="modal"]').bind('click',function(e) {
e.preventDefault();
var url = $(this).attr('href');
if (url.indexOf('#') == 0) {
$('#response_modal').modal('open');
} else {
$.get(url, function(data) {
$('#response_modal').html(data);
$('#response_modal').modal();
}).success(function() { $('input:text:visible:first').focus(); });
}
});
});
<a href="/url/to/load/modal_window.htm" data-toggle="modal">link</a>
<div id="response_modal" class="modal hide fade"></div>
<div class="modal-header">
<a class="close" data-dismiss="modal">&times;</a>
<h3>Modal header 2</h3>
</div>
<div class="modal-body">
<p>One body...</p>
</div>
<div class="modal-footer">
<a class="btn btn-primary">Save Changes</a>
<a class="btn" data-dismiss="modal">Close</a>
</div>
@solver80
Copy link

solver80 commented Aug 7, 2012

Your Modal works but if you put code below in the doal body that will open new page instead modal window:

<script type="text/javascript"> var ids = 'text'; document.write(ids); </script>

@solver80
Copy link

solver80 commented Aug 7, 2012

code:

<script type="text/javascript">
 var ids = 'text';
document.write(ids);
</script>

@kneidels
Copy link

I forked this with a small change, to allow it to target various other divs.
Thanks to both @nextroy and @drejoh for this - just what i was looking for!

@niccottrell
Copy link

Does line #9 make sense? Won't this just open an empty modal rather than the div with the ID specified in the href like standard Bootstrap?

@freddyheppell
Copy link

Small problem with this. I've got an addthis code in the modal. It loads for the first opening but not any others after

@jotapepinheiro
Copy link


Editar

var url = $(this).attr('rel');

@JFOC
Copy link

JFOC commented Jun 20, 2013

loading page with many objects is slow using modal from my end

@vinitkumar
Copy link

Does it even work? Adding a link for jsfiddle or jsbin would really help

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment