親側（モダールを立ち上げる方）からは、そのモーダルの外側に閉じるボタンを置くことは
不可能である。

よって、閉じられるモーダル側に実装する（iframeだろうが、divのコンテンツだろうが一緒）
そして開く側で、その分を加味したサイズで開けばよい。
そしてサイズ分ネガティブマージンを持つ。

実際のサイズが1130 X 920で閉じるボタンが
右に20px、縦に20pxほどはみ出ている場合は、
開く側では、

  $(".detail").colorbox({
    onOpen:function(){
      $("#overlay").fadeIn(fadeTime);
    },
    onClosed:function(){
      $("#overlay").fadeOut(fadeTime);
    },
    iframe: true,
    innerWidth: 1150,
    innerHeight: 940,
    opacity: 0,
    transition: "fade",
    speed: 500,
    scrolling: false
  });

    innerWidth: 1150,
    innerHeight: 940,

の部分を大きめに開く。

そして開かれる側のモダールのhtml内で（対象となる閉じるボタンのクラスをcloseとすると）

 $('.close').click(function () {
   parent.$.colorbox.close();
 });

この時、colorbox.jsの読み込みは必須なので、読み込みも記述すること。

このようにして、モーダルサイズ外側の閉じるボタンは実装できる。