ホームページ > 記事 > ウェブフロントエンド > ポップアップ層 1: JQuery.Boxy (1) use_jquery の概要

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

WBOYオリジナル: 2016-05-16 18:01:091098ブラウズ

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 、ボックスの動作を一致する要素にバインドします

コードをコピーします

コードは次のとおりです次のように:
3.1. ダイアログボックスをクリックします。ポップアップします
a タグのタイトルが設定されていない場合、ポップアップボックスにはタイトルがなく、href の後のアンカーマーク m1 が表示される対応する要素 ID になります。 none に設定されている場合、要素のデフォルトはポップアップによって表示が設定されます。 < ;script type="text/javascript">

$(function() {

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

3.2. ドキュメントをロードし、プロンプトメッセージを表示します

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

 コードをコピーします 

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