HTML コード

ここの構文は、href 属性で指定された外部ページの標準的なHTMLです。 これは、クライアントがJavaScriptをサポートしていない場合でも、外部ページは 見ることができることが保証されます。JavaScriptの世界では、これを "プログレッシブ·エンハンスメント"と呼んでいます。実際のコンテンツがロードされる オーバレイの内部に、特殊な wrapper タグを使用していることに注意してください:

<!-- 外部ページはhref属性で指定する -->
<a href="external-content.htm" rel="#overlay" style="text-decoration:none">
  <!-- remember that you can use any element inside the trigger -->
  <button type="button">Show external page in overlay</button>
</a>
 
<!-- 他方のリンク。同じオーバレイを使用 -->
<a href="external-content2.htm" rel="#overlay" style="text-decoration:none">
  <button type="button">Show another page</button>
</a>
 
<!-- オーバレイ要素 -->
<div class="apple_overlay" id="overlay">
  <!-- 外部コンテンツは、このタグ内にロードされる -->
  <div class="contentWrap"></div>
</div>

JavaScript コード

オーバレイ・コンストラクタへの最初の引数として直接指定することができる、 onBeforeLoad イベントでローディングされます。このイベントは、 ラッパー要素内に外部コンテンツをロードします。イベント関数内で、this 変数は、オーバレイAPIへのポインタです。

$(function() {
 
  // オーバレイに関数の引数が指定されている場合、
  // それは onBeforeLoad イベントリスナと見なされる
  $("a[rel]").overlay({

    mask: 'darkred',
    effect: 'apple',

    onBeforeLoad: function() {

      // コンテンツ内のラッパー要素を獲得
      var wrap = this.getOverlay().find(".contentWrap");

      // トリガーで指定されたページを読み込む
      wrap.load(this.getTrigger().attr("href"));
    }

  });
});

注:単に外部ページをロードしたいだけであれば、 オーバレイを初めて開く時に、if (wrap.is(":empty")) ステートメント内部の load コールをラップすることができます。 その場合には、同じオーバレイを使用して別のURLを開く複数のトリガを持つ ことはできません。

CSS コーディング

CSSファイル overlay-apple.css を継続して 使用しますが、次のCSSの設定でそれを上書きします。 今回は、オーバレイに半透明な背景画像を使用しました。これはCSSで変更することができます。 さらに、必要な場合のみ表示されるように、コンテンツへスクロール・バーを使用しました (小さなコンテンツにスクロール・バーは出現しません)。 ロードするページの大きさが分からなければ、これは手軽な策です。

  /* オーバレイに半透明な画像を使用 */
  #overlay {
    background-image:url(/media/img/overlay/transparent.png);
    color:#efefef;
    height:450px;
  }
  /* 外部コンテンツのコンテナ。必要なら縦スクロールバーを使用する */
  div.contentWrap {
    height:441px;
    overflow-y:auto;
  }