JSFiddle - React, Tailwind, and code Playground
HTML
<a href="http://placekitten.com/200/300" class="yam">kittykitty</a>
CSS
#yam-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: #000;
opacity: 0.5;
filter: alpha(opacity=50);
}
#yam-modal {
position:absolute;
background:rgba(0,0,0,0.2);
border-radius:14px;
padding:8px;
}
#yam-content {
border-radius:8px;
background:#fff;
padding:20px;
}
#yam-close {
position:absolute;
background:url(http://f.cl.ly/items/331e3a3q39141P0e1v3r/Image%202012.11.19%2019.42.05.png) 0 0 no-repeat;
width:24px;
height:27px;
display:block;
text-indent:-9999px;
top:-7px;
right:-7px;
}
JavaScript
var yam = (function(){
var
method = {},
$overlay,
$modal,
$content,
$close;
// Center the modal in the viewport
method.center = function () {
var top, left;
top = Math.max($(window).height() - $modal.outerHeight(), 0) / 2;
left = Math.max($(window).width() - $modal.outerWidth(), 0) / 2;
$modal.css({
top:top + $(window).scrollTop(),
left:left + $(window).scrollLeft()
});
};
// Open the modal
method.open = function (content) {
var img = $(content).attr("href");
console.log(img);
$content.empty().append("<img src='" + img + "' />");
$modal.css({
width: 'auto',
height: 'auto'
});
method.center();
$(window).bind('resize.modal', method.center);
$overlay.fadeIn("fast").show(function(){
$modal.show();
});
};
// Close the modal
method.close = function () {
$modal.hide();
$overlay.hide();
$content.empty();
$(window).unbind('resize.modal');
};
// Generate the HTML and add it to the document
$overlay = $('<div id="yam-overlay"></div>');
$modal = $('<div id="yam-modal"></div>');
$content = $('<div id="yam-content"></div>');
$close = $('<a id="yam-close" href="#">close</a>');
$modal.hide();
$overlay.hide();
$modal.append($content, $close);
$(document).ready(function(){
$('body').append($overlay, $modal);
});
$close.click(function(e){
e.preventDefault();
method.close();
});
return method;
}());
$(document).ready(function(){
$('a.yam').click(function(e){
e.preventDefault();
yam.open(this);
return false;
});
});