For users of the fantastic Twitter Bootstrap, this will dynamically create a modal dialog for an image when you've got an <a> with the class of "modal-dialog". The image should have a data-attribute of "data-full-size". The image's alt attribute is used for the modal title. This is quick and dirty, but hopefully useable.

Twitter Bootstrap dynamic image modal

//Sample HTML to use
<a class="modal-dialog"><img src="thumb.png" alt="Image Title" data-full-size="full-size.png"></a>


// Look for modal pop-ups
var modalPops = $("a.modal-dialog");

//If there's modals, inject all the necessary code.
if(modalPops.length) { 
  //First add the data attributes
	modalPops.attr("data-toggle","modal");
	modalPops.attr("href","#modalPop");
	
	//All this generates the HTML for the modal pop up
	$('body').append('<div id="modalPop" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"><div class="modal-header"><button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button><h3 id="myModalLabel"></h3></div><div class="modal-body"></div><div class="modal-footer"><button class="btn" data-dismiss="modal" aria-hidden="true">Close</button></div></div>');

	$("a.modal-dialog").on("click", function(){
	
		//Get the full size image
		var imgPop = $(this).children().attr("data-full-size");
		
		//Make the model title the image alt and the body the full-size image.
		$('h3#myModalLabel').text($(this).children().attr("alt"));
		$('.modal-body').html("<img src=\""+imgPop+"\">");
		
		//Adjust the width of the modal based on the size of the image
		$(".modal").css({ 
			"width":"auto",
			"margin-left": function () {
	            return -($(".modal").width() / 2);
	        }
		});
	});
}

This is producing just a black faded screen, its creating the div but nothing inside it. Any ideas?