Custom Thickbox Broken on Dashboard Page?

Question

Custom Thickbox Broken on Dashboard Page?

Alan Storm

2016年8月9日 17:13

I'm working on an extension that, as part of its functionality, adds Thickboxes to many pages in the Wordpress admin. On most pages this works fine -- I use an in_admin_footer action hook to call add_thickbox, and include the HTML/Javascript (via an include statement) that includes the Thickbox.

    add_action( 'in_admin_footer', function(){   
        add_thickbox();    
        include(__DIR__ . '/includes/thickbox-div.php');
    });

And my Thickbox href string looks like

#TB_inline?height=480width=480inlineId=my_div_id

This works great -- most of the time. However, on a few admin pages (dashboard, plugins), the Thickbox will render too large, and with a incomplete "close" button off to the right.

Does anyone know why this happens, and if there's a fix? My first assumption is it's something some core Wordpress code is doing on these pages to customize the Thickbox -- but I haven't started debugging yet so I don't know that for sure.

I can start to think of dozens of ways to work around this myself in code -- but I'm hoping there's some known science out there to fix this.

Topic thickbox admin hooks Wordpress

Category Web

Alan Storm · Accepted Answer · 2016年8月9日 17:13

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

Remove body classes with custom style rules that change the display of the Thickbox close button (a hardcoded list, unfortunately)
Re-re-definine the tb_position function to the stock thickbox version (again, with a hard coded function copy/pasted from the thickbox library)
~~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.

Custom Thickbox Broken on Dashboard Page?

About