ポップアップ層 1: JQuery.Boxy (1) use_jquery の概要

1. プラグインをダウンロードして変更します
公式 Web サイト (http://plugins.jquery.com/files/boxy-0.1.4. zip）を参照してください。これらの言葉を書いているとき、最新バージョンはバージョン 0.1.4 です。ダウンロードして解凍すると、メインの js ファイルが 1 つあります。ポップアップレイヤーの角を丸くします。ファイルをシステムに導入し、boxy.css を修正し、以下の画像パスをプロジェクト内の実際の場所に変更します。設定が間違っていると、画像が無効になり、見苦しくなります。

コードをコピーします コードは次のとおりです:

/* ここの画像を相対画像に変更しますto css ファイルの画像ファイルへのパス*/
.boxy-wrapper .top-left { background: url('../images/boxy-nw.png') }
.boxy-ラッパー .top-right { 背景: url('../images/boxy-ne.png'); }
.boxy-wrapper .bottom-right { 背景: url('../images/boxy-se .png'); }
.boxy-wrapper .bottom-left { background: url('../images/boxy-sw.png'); }
/* 注: 次のパスが必要です。絶対パスまたは URL +/ //www.xxx.com/xxx.png の形式が表示されます*/
.boxy-wrapper .top-left { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader (src='/images/ boxy-nw.png'); }
.boxy-wrapper .top-right { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/ boxy-ne.png') ; }
.boxy-wrapper .bottom-right { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-se.png') ; }
.boxy -wrapper .bottom-left { #background: none; #filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/boxy-sw.png'); >
2. ページを参照するプラグイン

コードをコピーします

コードは次のとおりです:

;

3 、ボックスの動作を一致する要素にバインドします

コードをコピーします

コードは次のとおりです次のように: $(function() {

$(".boxy").boxy();

});

3.1. ダイアログ ボックスをクリックします。ポップアップします

ポップアップするハイパーリンクです

a タグのタイトルが設定されていない場合、ポップアップ ボックスにはタイトルがなく、href の後のアンカー マーク m1 が表示される対応する要素 ID になります。 none に設定されている場合、要素のデフォルトはポップアップによって表示が設定されます。

$(function() { $(".boxy").boxy();

> ; < ;a href="../default.aspx" class="boxy" title="プロンプト">3.2. ドキュメントをロードし、プロンプト メッセージを表示します

href コンテンツをポップアップ表示したいファイルへのハイパーリンク。 3.3. 送信時に確認ボックスが表示されます

コードをコピーします


コードは次のとおりです:

注:
1. ボックス型ダイアログ ボックスは、コンテンツ領域内でのサイズと位置を自動的に計算します。
パッケージ セットのサイズを明示的に指定する必要はありません。 2. 上記の簡単な使用方法は、boxy の message 属性の内容を間接的に指定することです。この属性は、デフォルトでは、「確認してください:」です。
3. タイトル。一致する各アンカーの属性は、対応するダイアログ ボックスのタイトル
4 として使用され、メッセージ内容の表示属性はブロック (ブロックとして表示) に設定されます


この記事のサンプルをダウンロード