jQueryその６ thickbox.jsのiframeを表示させると微妙にセンターがずれる件を調べてみた

かゆい所

デフォルトのCSSでは画面の半分の位置から4pxのborderを付けて描画するような指定になっているけど

#TB_window {
    position: fixed;
    background: #ffffff;
    z-index: 102;
    color:#000000;
    display:none;
    border: 4px solid #525252;
    text-align:left;
    top:50%;
    left:50%;
}

javascript側では指定した幅に30pxを加えた値で無理矢理boxを左にずらしてから、29pxを加えて表示ということをしている
でも実際に表示される場合はborderの4pxが左右に(上下にも)表示させるので右側が切れてしまう

function tb_position() {
  $("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: TB_WIDTH + 'px'});
  if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
    $("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
  }
}

      TB_WIDTH = (params['width']*1) + 30 || 630; //defaults to 630 if no paramaters were added to URL
      TB_HEIGHT = (params['height']*1) + 40 || 440; //defaults to 440 if no paramaters were added to URL
      ajaxContentW = TB_WIDTH - 30;
      ajaxContentH = TB_HEIGHT - 45;

          - 略 -

$("#TB_window").append("<div id='TB_title'>
  <div id='TB_ajaxWindowTitle'>"+caption+"</div>
  <div id='TB_closeAjaxWindow'><a href='#' id='TB_closeWindowButton' title='Close'>close</a> or Esc Key</div></div>
  <iframe frameborder='0' hspace='0' src='"+urlNoQuery[0]+"' id='TB_iframeContent'
    name='TB_iframeContent"+Math.round(Math.random()*1000)+"'
    onload='tb_showIframe()' style='width:"+(ajaxContentW + 29)+"px;height:"+(ajaxContentH + 17)+"px;' >
  </iframe>");

          - 略 -

          tb_position();

こんな感じ

これを踏まえてjavascriptをちょっと弄ってみた(とりあえず幅だけ)

      TB_WIDTH = (params['width']*1) + 8 || 630; //defaults to 630 if no paramaters were added to URL
      ajaxContentW = TB_WIDTH - 8;

          - 略 -

            style='width:"+(ajaxContentW)+"px;

          - 略 -

function tb_position() {
  $("#TB_window").css({marginLeft: '-' + parseInt((TB_WIDTH / 2),10) + 'px', width: (TB_WIDTH - 8) + 'px'});
  if ( !(jQuery.browser.msie && jQuery.browser.version < 7)) { // take away IE6
    $("#TB_window").css({marginTop: '-' + parseInt((TB_HEIGHT / 2),10) + 'px'});
  }
}