modal

gistfile1.html

{% block scripts %}
  <script src="{{ STATIC_URL }}js/libs/jquery.easing.1.3.min.js"></script>
	<script src="{{ STATIC_URL }}js/libs/jquery.activity-indicator-1.0.0.min.js"></script>
	<script src="{{ STATIC_URL }}js/intro-animation.min.js"></script>
	<script src="{{ STATIC_URL }}js/libs/jquery.colorbox-min.js"></script>
	<script type="text/javascript">
		// Piccolo script inline per modale
		$(function() {
			$('#gnammo-modal-internal-close').click(function() {
				$.colorbox.close()
				$('body').css('opacity', '1');
			});
			$('#main').css('opacity', '0.3');
			$.colorbox({
				html: $('#gnammo-modal').html(),
				transition: 'fade',
				width: "838px",
				height: "350px"
			});
			$('#gnammo-modal').css('opacity', '1');
		});
	</script>
{% endblock %}

	<div id="gnammo-modal" style="display:none">
		<div id="gnammo-modal-internal">
			<a href="http://blog.gnammo.com/gnammo_tour-prima_-tappa-milano/"><img src="{{ STATIC_URL }}images/banners/re.eat.jpeg"></img></a>
			<a id="gnammo-modal-internal-close" href="#close">X</a>
		</div>	
	</div>

http://www.jacklmoore.com/colorbox