Overriding inline style after element is loaded with Thickbox

Question

I have a form and there's a thickbox binded to an <a> element on it. When you click the element it loads an URL inside the box and runs some script. Due to restraints of the platform I'm working on, I have no access to the scripts, to the thickbox.js or to the HTML that's being loaded. All I can do is write my own styles and scripts.

The problem is that something is giving several inline styles to #TB_window after it's loaded. Take a look:

<div id="TB_window" style="position: fixed; z-index: 10002; top: 50%; left: 50%; margin-left: -315px; width: 630px; margin-top: -220px; display: block; ">

My whole problem lies on the width, I need to override that style. I tried to bind a click event to the <a>, like this:

('a#btnReferAFriend').click(function(){
    if('#TB_title.length'){
        $('#TB_window').css('width','400px');
        alert($#TB_window.css('width');
    } else {
        alert('Wrong');
    }
});

The result of that is script is an alert displaying "400px". But just after this my style is overriden by the inline ones. I don't know exactly what's happening, I think another script is running somewhere, maybe a modified thickbox.js?

What should I do to override the inline styles after they've been applied?

Answer 1

You can use the following style:

#TB_window { width:400px !important; }

This should override the width that is found in the inline style.

Answer 2

You can remove the inline style to force it to respect your own declarations:

$('#TB_window').removeAttr('style')