JSFiddle - React, Tailwind, and code Playground

by David Marshall

HTML

<a href="http://1.bp.blogspot.com/-Z5-yVzLVF3w/TwepWDvizhI/AAAAAAAAB58/FrJyR44YULk/s1600/image3.jpg"><img src="http://1.bp.blogspot.com/-Z5-yVzLVF3w/TwepWDvizhI/AAAAAAAAB58/FrJyR44YULk/s1600/image3.jpg" alt="thumb" /></a>

<div id="area"></div>

CSS

body{padding:50px;}


#area{
 position:fixed;
 top:0px;left:0px;
 background:#000; 
 width:100%;
 height:100%; 
 text-align:center;
 display:none; 
}

#area img{
 margin:100px auto 0px;   
}

#area input{
    display:block;
    width:400px;
    position:absolute;
    top:50px;
    left:50px;
    border:2px solid red;
    background:#fff;
}

#area .close{
 position:absolute;
 top:10px;
 right:10px;
 font:bold 50px Arial,Sans-Serif;
 color:#fff;   
}

JavaScript

$(function(){
    $('a').click(function(){
        var imgUrl = $(this).attr('href');
       $('#area').fadeIn(600).html('<img src="' + imgUrl + '" alt="large" /><input type="text" onclick="this.focus();this.select();" value="' + imgUrl + '" /><a class="close" href="#">&times;</a>');
       return false; 
    });
    
    
    $('a.close').live("click", function(){
        $(this).parent().slideUp();
        return false;
    });
    
    
});