時に、JavaScriptコードから直接、ユーザへのダイアログや情報ボックスを開きたい ことがあります。この場合、トリガ要素を必要とせずに、セットアップがわずかに異なります。 このページは、ページのロード時にオーバレイをロードしますが、 JavaScriptから、 いつでも好きな時に行うこともできます。
ページのロード時に、プログラムでこのダイアログは開かれます。トリガ要素は不要です。
閉じるには、閉じるボタンをクリックするか ESC キーを押します。
今回のインストールは、以前の例とは異なります。 jQueryセレクタで、トリガ要素ではなく、オーバレイ要素を選択します。 その後、単に load コンフィギュレーション変数を有効にします。
// オーバレイ要素を選択し - "そのオーバレを作る"
$("#facebox").overlay({
// トップ位置のカスタマイズ
top: 260,
// some mask tweaks suitable for facebox-looking dialogs
mask: {
// you might also consider a "transparent" color for the mask
color: '#fff',
// load mask a little faster
loadSpeed: 200,
// very transparent
opacity: 0.5
},
// disable this for modal dialog-type of overlays
closeOnClick: false,
// load it immediately after the construction
load: true
});
注: ページロード時に apple 効果を使用したい場合、 詳細は、リンゴ効果を参照してください。
Facebox のルック&フィールに興味があれば、トリックはボーダーへRGBAカラーを使用することです。 ここに、使用している CSS があります:
#facebox div {
padding:10px;
border:1px solid #3B5998;
background-color:#fff;
font-family:"lucida grande",tahoma,verdana,arial,sans-serif
}
#facebox h2 {
margin:-11px;
margin-bottom:0px;
color:#fff;
background-color:#6D84B4;
padding:5px 10px;
border:1px solid #3B5998;
font-size:20px;
}