﻿function configurarPopUp(idAbrir, idCerrar, idFondo, idPopUp) {

    // Settings
    settings = {
        modalColor: '#000',
        opacity: 50
    }

    // Set open pop-up function to asigned element.
    $('#' + idAbrir).click(function() {
        $('#' + idFondo).fadeIn(300);
        $('#' + idPopUp).fadeIn(200);
    });

    // Set close pop-up function to asigned element
    $('#' + idCerrar).click(function() {
        $('#' + idFondo).fadeOut(300);
        $('#' + idPopUp).fadeOut(200);
    });

    // Set overlay dimensions to match window/content dimensions
    $('#' + idFondo).css({
        'position': 'absolute',
        'top': '0',
        'left': '0',
        'width': $(window).width() + 'px',
        'height': $(window).height() + 'px',
        'background-color': settings.modalColor,
        'opacity': settings.opacity / 100,
        'filter:alpha(opacity=50)': settings.opacity
    });

    // Set box element position in the middle the of the viewport.
    $('#' + idPopUp).css({
        'position': 'absolute',
        'top': '50%',
        'left': '50%',
        'margin-top': '-' + $('#' + idPopUp).outerHeight() / 2 + 'px',
        'margin-left': '-' + $('#' + idPopUp).outerWidth() / 2 + 'px'
    });

    // Set overlay and box elements display mode to "hide".
    $('#' + idFondo).hide();
    $('#' + idPopUp).hide();
}