Dynamic (AJAX) loaded Bootstrap Modal (Bootstrap 2.0)

custom.js

$(document).ready(function() {
	
// Support for AJAX loaded modal window.
// Focuses on first input textbox after it loads the window.
$('[data-toggle="modal"]').click(function(e) {
	e.preventDefault();
	var href = $(this).attr('href');
	if (href.indexOf('#') == 0) {
		$(href).modal('open');
	} else {
		$.get(href, function(data) {
			$('<div class="modal" >' + data + '</div>').modal();
		}).success(function() { $('input:text:visible:first').focus(); });
	}
});
	
});

index.htm

<a href="/url/to/load/modal_window.htm" data-toggle="modal">link</a>

modal_window.htm

<div class="modal-header">
	<a class="close" data-dismiss="modal">×</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>

secondWay.html

<!--Citing from: http://blog.assimov.net/blog/2012/03/09/ajax-content-in-twitter-bootstrap-modal/ -->
<a class="btn" id="demo" href="/url/to/load/ajax.php" data-toggle="modal" data-target="#myModal">Launch Modal</a>
<div class="modal fade" id="myModal">
	<div class='modal-header'>
		<button type='button' class='close' data-dismiss='modal'>&times;</button>
		<h3>A Header</h3>
	</div>
	<div class='modal-body'>
		<p>Loading...</p>
	</div>
	<div class='modal-footer'>
		<a href='#' class='btn' data-dismiss='modal'>Close</a>
	</div>
</div>
<script>
($("a[data-toggle=modal]")).click(function() {
  var target, url;
  target = $(this).attr('data-target'); // we could do: target = $("#myModal div.modal-body");
  url = $(this).attr('href');
  return $(target).load(url);
});
</script>

what is the data-target in here.. i can't see any in the html .. can you please show. looks like a shorter solution than mine :)

grabbed from here: http://blog.assimov.net/blog/2012/03/09/ajax-content-in-twitter-bootstrap-modal/

for target, we could also do: target = $("#myModal div.modal-body");

Here is what we've put together, to make the code more re-usable (applying ID to save button for form submit functions, Modal Titles, etc..)

THE JS:

    $('.open-modal').click(function(e) {
        e.preventDefault();
        var url = $(this).attr('href'),
            modalsize = $(this).data('modal-size'),
            modaltitle = $(this).data('modal-title'),
            modalclass = $(this).data('modal-class'),
            buttonid = $(this).data('button-id'),
            modalbutton = $(this).data('modal-button'),
            target = $(this).data('target');

        //set the text of the modal title
        $(target+' .myModalLabel').html(modaltitle);

        //add class to modal, if needed, to override modal size/placement
        if(modalclass){$(target).addClass(modalclass);}

        // set the button id so we can target the click function of it.
        if(buttonid){$(target+' .modalsave').attr("id",buttonid); }

        if(modalsize){$(target).addClass(modalsize); }

        // set the text of the save button 
        if(!modalbutton){
           $(target+' .modalsave').hide(); 
        } else {
          $(target+' .modalsave').show().html(modalbutton);   
        }

        $(target).find('.modal-body').load(url, '', function(){
            $(target).modal().on('hidden', function(){ 
                $(this).find('.modal-body').empty();
                 // lets clear the classes and settings we just applied, so concurrent modals dont retain these!
                if(modalclass){$(target).removeClass(modalclass);}
                if(modalsize){$(target).removeClass(modalsize);}
                $(target+' .myModalLabel').html('Information');
                $(target+' .modalsave').html('Save');
                $(target+' .modalsave').removeAttr("id");
            });
        }); 
    });         

THE LINK:

                <a href="/url-to-load-here/"
                    data-modal-size="used-by-CSS-to-change-modal-size-position"
                    data-modal-title="Modal Title"
                    data-modal-class="custom-js-or-css-for-this-modal"
                    data-button-id="ID-for-save-button"
                    data-modal-button="text-for-modal-save-button"
                    data-target="#default-modal" 
                    class="btn btn-info open-modal">Button Text</a> 

<div id="default-modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="Modal Window" aria-hidden="true">
    <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
        <h3 class="myModalLabel">Information</h3>
    </div>
    <div class="modal-body"></div>
    <div class="modal-footer">
        <button class="btn" data-dismiss="modal" id="cancel" aria-hidden="true">Close</button>
        <button class="btn btn-primary modalsave" id="">Save</button>
    </div>
</div>

Here is an example:
http://jsfiddle.net/revive/rmjqq/

Note, that you can change the data-target of the link, for instances where you may be wanting to call a different modal HTML markup

Thanks for the inspiration and direction for this !!

@revivemarketing thanks for sharing!