OVERLAY - jQuery TOOLS

[ プログラムでオーバレイを開く ] [ メニュー ] [ オーバレイに外部ページを読み込む]

異なるスタイルのオーバレイ

オーバレイへのスタイル設定は簡単です。すべてをCSSで行うことができます。ルック＆フィールに最も影響する物は、拡張する画像を定義する backgroundImage プロパティです。ボタンをクリックして、いろいろな種類のオーバレイを開いてください:

ここにオーバレイがあります

Sit amet felis non sem eleifend rhoncus. Mauris imperdiet consequat neque, ac molestie eros venenatis pharetra. In et leo nulla. Vivamus feugiat consequat augue nec vulputate. Vestibulum a ipsum et turpis viverra accumsan.

Cras sit amet est purus, a consectetur augue. Ut scelerisque consequat dictum. Donec in nulla risus. Nulla metus elit, tempus vel fermentum sed, dictum eu justo. Etiam et nulla ligula. Integer in tincidunt tellus. Cras cursus, lectus id tincidunt tincidunt, eros arcu cursus velit, a euismod justo lectus non quam. Ut euismod erat eu elit hendrerit.

Nulla vitae tellus justo. Donec condimentum lorem ac enim blandit id lobortis felis pellentesque. Mauris nulla velit, ultrices vel tempor vitae, sollicitudin vitae ligula. Vestibulum nec ullamcorper turpis. Aliquam aliquam aliquam pharetra.

ここにオーバレイがあります

スタンドアロン・デモ

セットアップ

セットアップは、最小限のセットアップと同じですが、今回は、複数のボタンと、複数のオーバレイを持ちます。各オーバレイは、この1回のJavaScriptコールで初期化されます:

<!-- オーバレイ・トリガ。オーバレイは 'rel' 属性で参照される -->
<p>
  <button rel="#petrol" type="button">petrol</button>
  <button rel="#custom" type="button">custom</button>
  <button rel="#custom2" type="button">custom <em>2</em></button>
  <button rel="#apple" type="button">apple</button>
</p>
 
<!-- 各オーバレイは1回のJavaScriptコールで初期化される -->
<script>
  $(function() {
    $("button[rel]").overlay({mask: '#000', effect: 'apple'});
  });
</script>

オーバレイ

各オーバレイは、それぞれのオーバレイへ共通のスタイルを定義するために、クラス overlay を持っています。この共通なスタイルは、このスタイルシートt から取得します。各オーバレイは、別々にカスタマイズできるように、ユニークな id 属性を持っています。

<!-- id "petrol" を持つ1番目のオーバレイ -->
<div class="overlay" id="petrol">
  .. content ..
</div>
 
<!-- id "custom" を持つ2番目のオーバレイ -->
<div class="overlay" id="custom">
  ...
</div>
 
<!-- 3番目のオーバレイ、背景イメージは、もちろん、style 属性で
     定義できる -->
<div class="overlay" id="custom2"
     style="background-image:url(/media/img/overlay/flowplayer.png)">
</div>

CSS コーディング

CSSコーディングは、デフォルトのスタイル設定をオーバーライドして設定します。これには、背景画像とサイズをカスタマイズすることも含まれます。もちろん、あなたが望むいかなるCSS設定も使用することができます。 CSSは、強力な言語です。

#custom {
    background-image:url(/media/img/global/commerce/box-512.png);
    width:512px;
    height:531px;
    padding:0px;
}
#custom div.close {
    right:-15px;
    top:-10px;
}
#petrol {
    background-image:url(/media/img/overlay/petrol.png);
    color:#fff;
}
#apple {
    background-image:url(/media/img/overlay/apple.png);
    color:#fff;
    padding:50px 70px;
}

注: 背景画像が非常に大きくとも、ユーザがスムーズな動作を見られるように、このツールは、背景画像をブラウザのキャッシュへ自動的にロードすることを注意してください。 configuration からこのプリロード効果を使用不可にすることができます。

[ プログラムでオーバレイを開く ] [ メニュー ] [ オーバレイに外部ページを読み込む]