Edit in JSFiddle

var UI = {};

UI.Modal = (function() {
    /**
     * Shows waiting message
     */
    function showWaitingMessage() {
        showContent("Patience is a virtue...");           
    }
    /**
     * The main show content function.
     * @param html the html to show
     */
    function showContent(html) {
        $.fancybox(html);
    }
    return {
        showWaitingMessage: showWaitingMessage,
        showContent: showContent                    
    }
}());

UI.Templating = (function() {
    /**
     * Gets the html
     * @param source template source
     * @param data
     * @return string the html
     */
    function toHtml(source, data) {
        var template = Handlebars.compile(source);
        return template(data);
    }
    return {
        toHtml: toHtml                    
    }
}());

$("#show-modal").on("click", function(e) {
    UI.Modal.showWaitingMessage();
    // simulate template request
    var dfdTpl = $.ajax({type: "POST",
        url: "/echo/html/",
        data: {html: "Hello from <b>{{name}}</b>!", delay: 1},
        dataType: "html"
    });
    // simulate data request
    var dfdData = $.ajax({type: "POST",
        url: "/echo/json/",
        data: {json: JSON.stringify({name: "See Wah"}), delay: 1},
        dataType: "json"
    });
    $.when(dfdTpl, dfdData).done(function(arg1, arg2) {
        UI.Modal.showContent(UI.Templating.toHtml(arg1[0], arg2[0]));
    });
    e.preventDefault();
});

   

<input type="button" id="show-modal" value="Show me the modal!">