jQuery Modal popup

by amindunited

HTML

<div class="pageWrapper">
    <ul id="coffeesUL">
    </ul>
</div>
<div id="modal-popup-template">
    <button class="modal-popup-close">Close</button>
    <div class="modal-popup-content">
    
    </div>
</div>

CSS

#coffeesUL {
    text-align:center;
}
#coffeesUL li{
    display: inline-block;
    background-color: #bcbcbc;
    display: inline-block;
    padding:5px;
    margin:5px;
    border:inset 1px #9a9a9a;
    border-radius: 5px;
    width:200px
    font-size:6px;
}
#coffeesUL li img {
    border:inset 1px #9a9a9a;
    border-radius: 5px;
}
#coffeesUL li .image_details li {
    border:none;
}
.modal-blocker {
    position:absolute;
    top:0px;
    left:0px;
    width:100%;
    height:100%;
    opacity:0.5;
    background-color: black;
}
.modal-popup-template, .modal-popup {
    position:absolute;
    padding:5px;
    margin:5px;
    border:inset 1px #9a9a9a;
    border-radius: 5px;
    background-color: white;
    width: 200px;
    height:200px;
}

JavaScript

(function($){
    var blocker;
    var popup;
    var settings = {
        popupTemplate : ".modal-popup-template",
    }

    var methods = {
        show : function(e){
            blocker = $("<div></div>").addClass('modal-blocker').appendTo($('body'));
            if ( $('.modal-popup').length ) {                
                popup = $("<div></div>").addClass('modal-popup')
            }
            else {
                popup = $('.modal-popup')
            }
            $(popup).appendTo($('body')).html($('#modal-popup-template'));
            
            methods.center();
            $(window).resize(function(e){
                methods.center();
            }) 
            $(".modal-popup-close", $(popup)).on('click', function(e){
                methods.close();
            })
        },
        center : function(elm){
            var t = ( $('body').height() / 2 ) - ( $(popup).outerHeight() / 2 );
            var l = ( $('body').width() / 2 ) - ( $(popup).outerWidth() / 2 );
            
            $(popup).css({
                top : t,
                left : l
            })
        },
        close : function () {
            $(blocker).remove();
            $(".modal-popup").hide();
        }
    }
    $.fn.modal = function(){
        $(this).on('click', function(e){
            return methods.show.apply( this, arguments );
        })
    }
})(jQuery);

$(function () {
    $.getJSON( 
        "http://picasaweb.google.com/data/feed/api/user/buckley.robin/albumid/5751950773409336513" + '' +'?alt=json&thumbsize=' + '200' , function(data){
        var images = data.feed.entry;
        images = images.slice(120, 132);
        console.log(images);
        var imagesHTML = "";
        images.sort(function(a, b){            
            return b.gphoto$timestamp.$t - a.gphoto$timestamp.$t;
        });
        for(var i = 0; i < images.length; i++) {
            var _date = new Date(parseInt(images[i].gphoto$timestamp.$t));
            _date =...