Super simple lightbox... I feel like I have implemented this 10 times recently... This is more a base than a ready-to-use script.

simple_lightbox.js

function closeLightbox() {
    $('.pledge_dialog_overlay').remove();
}

function centerDialog(content) {
    var height = content.height();
    var winHeight = $(window).height();
    var spacing = Math.max(0, (winHeight - height) / 2);
    var top = $(window).scrollTop() + spacing;
    // in case there is a header bar... try to find where the content starts
    var mainContentPos = $('#grve-main-content').position();
    if (mainContentPos && mainContentPos.top > top) {
        top = mainContentPos.top;
    }
    //console.log('set top = ' + top + ', spacing = ' + spacing + ', height = ' + height + ', winHeight = ' + winHeight);
    content.css('margin-top', top + 'px');
}

// very simple dialog function (we can't use colorbox, because the links within the dialog might point to colorbox)
function simpleLightbox(url, onDialogReadyCb) {
    var bodyHeight = $(document.body).height();
    closeLightbox();

    // create overlay.  style is defined here to avoid making an extra request for the CSS
    var style = ['position: absolute',
        'top: 0', 'left: 0', 'width: 100%', 'height: ' + bodyHeight + 'px',
        'background: rgba(0,0,0,.7)',
        'text-align: center',
        'z-index: 10'].join(';');

    var overlay = $('<div class="pledge_dialog_overlay" style="' + style + '"></div>')
        .appendTo(document.body)
        .click(function(evt) {
            // allow closing dialog on overlay click
            if(evt.target === this) {
                $(this).remove();
            }
        });

    var content = $('<div class="pledge_dialog" style="background: white; width: 200px; ' +
            // for centering with CSS.  unfortunately this prevents scrolling on mobile
            //'position: relative; top: 50%; transform: translateY(-50%);' +
        'margin: 0 auto; box-sizing: border-box ">' +
        '<div id="cboxLoadingGraphic" style="position: static; width: 200px; height: 200px"></div>' +
        '</div>')
        .appendTo(overlay);

    centerDialog(content);
    $.get(url, null, function (result) {
        // set the dialog's content and resize it to contain the image
        content.html(result);
        $('<div class="dlg_close">&times;</div>').prependTo(content)
            .click(closeLightbox);
        var img = content.find('.pledge_category_image');
        if (img.length) {
            content.width(img.width());
        }
        onDialogReadyCb(content);
        centerDialog(content);
    });
}