04 December, 2013

jQuery simple popup sample

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js" type="text/javascript"></script>
</head>
<body>
<a id = "mainImage" href="http://apod.nasa.gov/apod/image/1312/RhoOph_Defavari_960.jpg">
<img src="http://apod.nasa.gov/apod/image/1312/RhoOph_Defavari_960.jpg" alt="See Explanation.  Clicking on the picture will download
 the highest resolution version available." style="
    width: 150px;padding-left:15px
" /></a>
<div id= "popupbg" style=" position:fixed; display:none; left:0; top:0; background:#000; opacity:0.7; width:100%;height:100%;"></div>
<div id= "popup" style="margin:0% 30% 0% 30%; width:40%; height:auto;  position:fixed; display:none; left:0; top:10%; border:10px solid #fff; border-radius:8px;">
    <img id="popupimg" style="width:100%;" />
</div>
</body>
</html>
<script type="text/javascript">


$('#mainImage').click(function(){
    
    var src = $(this).attr('href');
    $('#popupimg').attr('src',src); 
    $('#popupbg').show();
    $('#popup').fadeIn(600);    

    $('#popup').click(function(){
        $(this).fadeOut(600);       
        $('#popupbg').hide();
    });
    
    return false;
});



</script>

Please click the NASA image to see how it works.