jquery - マスク付きjQuerytoolsオーバーレイ

Question

オーバーレイを自分のサイトにうまく表示できません。必要なのは、クリックしたリンクから href を取得してオーバーレイの上に表示する iframe を備えた単純なライトボックスだけです。私は自分のサイトに jQueryTools をセットアップしているので、そのオーバーレイ機能を使用できると考えました。これが私のコードです：

 $(function(){
    $("body").append('<div class="oiOverlay" id="overlay"><div class="oiContentWrap"></div></div>');
    $("a[rel]").overlay({
        mask: '#000',
        closeOnClick: false,
        onBeforeLoad: function() {
            // grab wrapper element inside content
            var wrap = this.getOverlay().find(".oiContentWrap");
            // load the page specified in the trigger
            wrap.load(this.getTrigger().attr("href"));
        }
    });
});

CSS

#overlay { display: none; width:625px; z-index: 1000; min-height:200px; border:1px solid #000; }

HTML

<a href="http://www.google.com" rel="overlay">Google overlay</a>

私が得ているのは、中央ではなく左に配置されたボックスであり、その背後に背景/マスク/オーバーレイ効果はありません。何を見逃したのかわかりません。これは、コードを書くときにたどったページです: http://jquerytools.org/demos/overlay/styling.html

更新: JQuerytools オーバーレイをあきらめて、独自のオーバーレイを作成しました