Cacher is the code snippet organizer for pro developers

/**
 * Visor de fotos en pantalla
 * @type {{open: Function, close: Function}}
 */
LoadImage = {
    /**
     * Abrir la imagen
     * @param imagen
     */
    open: function (imagen) {

        //crear el visor
        $('body').append('<div id="loadImage" ><img src="' + imagen + '" alt="imagen"></div>')
        $('body').append('<div id="cerrarFondo" onclick="LoadImage.close()"></div>')
        $('body').append('<div id="cerrarImage"><a href="#!" onclick="LoadImage.close()">CERRAR [X]</a></div>');

        //aplicar CSS
        $('#loadImage').css({
            'position': 'fixed',
            'left': '50%',
            'top': '50%',
            'transform': 'translate(-50%, -50%)',
            'z-index': '999',
            'padding': '.3em',
            'box-shadow': '0 0 2px 1px grey',
            'background': 'white'
        });
        $('#loadImage > img').css({
            'max-height': '700px'
        });
        $('#cerrarFondo').css({
            'position': 'fixed',
            'width': '100%',
            'height': '100%',
            'z-index': '998',
            'top': '0',
            'left': '0',
            'background': 'rgba(0, 0, 0, .8)'
        });
        $('#cerrarImage').css({
            'position': 'fixed',
            'top': '2%',
            'z-index': '998',
            'right': '2%'
        });
        $('#cerrarImage > a').css({
            'color': 'white'
        });

    },

    /**
     * Cerrar el visor
     */
    close: function () {
        $('#loadImage,#cerrarFondo,#cerrarImage').remove();
    }
};