Custom Thickbox Broken on Dashboard Page?

by

After digging into this for a bit, it looks like there’s a number of pages where WordPress ends up changing the behavior of the default thickbox implementation — this includes both javascript changes, as well as custom style rules. You can see an example of this here

#File: wp-admin/js/media-upload.js
// thickbox settings
var tb_position;
(function($) {
    tb_position = function() {
        var tbWindow = $('#TB_window'),
            width = $(window).width(),
            H = $(window).height(),
            W = ( 833 < width ) ? 833 : width,
            adminbar_height = 0;
            //...

The above code ends up redefining the tb_position function with some hard coded height/width values. There’s also custom style rules scoped to a particular page with a body class. 

#File: wp-admin/css/common.css
body.about-php #TB_window.thickbox-loading:before,
body.plugin-install-php #TB_window.thickbox-loading:before,
body.import-php #TB_window.thickbox-loading:before,
body.plugins-php #TB_window.thickbox-loading:before,
body.update-core-php #TB_window.thickbox-loading:before,
body.index-php #TB_window.thickbox-loading:before {
    content: "";
    display: block;
    width: 20px;

There’s no great or elegant work around here. For my own purposes, I’m calling the following (custom written) javascript function prior to display my own thickboxes (this also requires me to take over opening the thickboxes myself with calls to tb_show)

var resetWordpressHacks = function(){        
    //remove these styles from body if they exist
    var classes = ['about-php','plugin-install-php','import-php',
        'plugins-php','update-core-php','index-php'];
    var removed = [];
    $.each(classes, function(k,v){
        if(!$('body').hasClass(v)) { return; }
        removed.push(v);
        $('body').removeClass(v);
    });                

    var tb_position_original = window.tb_position;

    //some wordpress pages redefine this function which breaks
    //the thickbox, so we need to reset it here.  
    window.tb_position = function() {
        var isIE6 = typeof document.body.style.maxHeight === "undefined";
        jQuery("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
        if ( ! isIE6 ) { // take away IE6
            jQuery("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
        }
    }

    var tb_remove_original = window.tb_remove;
    window.tb_remove = function()
    {
        $.each(removed, function(k,v){
            $('body').addClass(v);
            window.tb_position = tb_position_original;
        });
        tb_remove_original();
    } 
}

This function will

  1. Remove body classes with custom style rules that change the display of the Thickbox close button (a hardcoded list, unfortunately)

  2. Re-re-definine the tb_position function to the stock thickbox version (again, with a hard coded function copy/pasted from the thickbox library)

  3. Monkey Patches, redefines the tb_remove function to restore the body class and custom tb_position function from above before calling the original tb_remove function

The end result of this is WordPress’s size and style customizations are un-done, but restored when the thickbox closes. I can’t speak for how stable this is, but it seems to be working for me at the moment. Also, this function doesn’t undo every change (some are scoped away an not accessible), so keep that in mind when using this solution.