jQuery Mobileを利用してポップアップを設置する方法

HOME > WEB屋の知識と技術ブログ > WEB屋になる為の知識と技術 > jQuery Mobileを利用してポップアップを設置する方法

Facebookの投稿

ウェブ制作技術 SNS・ブログ

ウェブ制作のご注文は全国対応

北海道青森岩手秋田宮城山形福島東京神奈川埼玉県千葉茨城群馬栃木愛知静岡三重岐阜新潟長野山梨石川富山福井大阪京都奈良兵庫滋賀和歌山岡山広島鳥取山口島根愛媛徳島高知香川福岡佐賀長崎大分熊本宮崎鹿児島沖縄

jQuery Mobileでポップアップを設置する方法

jQuery mobileではポップアップといった動作的に動くツールが簡単な指定で設置することができます。
html + cssの設定とは全く異なる指定方法ではありますが、指定方法がわかるようになると簡単です。

　1. ポップアップの指定要素
　2. ポップアップに属性要素
　3. ポップアップに動作を加えた要素
　4. ポップアップ表示の位置を示す要素一覧
　5. ポップアップの属性として利用するパラメーター一覧

ポップアップの指定要素

ポップアップ表示を行いたい場合は、ポップアップとして表示すべき領域に「

」要素で指定して配置します。
「href」属性に「#id」要素を利用して表示されるポップアップを指定します。
また、呼び出し先がポップアップであることを「data-rel="popup"」属性で指定します。
【ポップアップ】

テキストをクリック

ポップアップで表示されます

サンプルはこちら

【位置を指定したポップアップ】
※「data-tolerance」パラメーターを利用してポップアップの表示位置を指定する。
※デフォルトではラメーターは適用されず、設定値は「none」の状態です。

テキストをクリック

ポップアップで表示されます

サンプルはこちら

【テキストのアイコンに指定したポップアップ】

右のアイコンをクリックLearn more

ポップアップで表示されます

サンプルはこちら

ポップアップに属性要素

ポップアップ表示を吹き出し付きにしたい場合は、ポップアップ「data-arrow」属性で吹き出しを指定します。
値は、「"t"、"r"、"b"、"l"」で指定します。「"true"」を設定すると、いずれかの辺が自動的に選ばれて表示されます。
その他、閉じるボタンを配置するには、a要素に「data-rel="back"」属性を指定し、クラス要素でアイコン種類を指定します。

【吹き出し付きポップアップ】

右のアイコンをクリックLearn more

ポップアップで表示されます

サンプルはこちら

【角丸を解除したポップアップ】
※角丸を解除するには「data-corners="false"」を指定します。

ポップアップを表示 »

ポップアップでのメッセージ

サンプルはこちら

【影を解除したポップアップ】
※影を解除するには「data-shadow="false"」を指定します。

ポップアップを表示 »

ポップアップでのメッセージ

サンプルはこちら

【閉じるボタンをつけたポップアップ】
閉じるボタンを表示させる場合、a要素に「data-rel="back"」を指定し、ボタンになるアイコンを配置すれば表示されます。

ポップアップを表示 »

ポップアップでのメッセージ

サンプルはこちら

【背景色をグレーにするオーバーレイポップアップ】
ポップアップで表示された際、背景にグレーあうとが掛かるようにオーバーレイの設定をする場合は「data-overlay-theme」属性を指定します。

ポップアップを表示 »

ポップアップでのメッセージ

サンプルはこちら

ポップアップに動作を加えた要素

ポップアップ表示に動作を加えたい場合は、「data-transition」属性で「fade, flip, flow, pop, slide, slidedown, slidefade, slideup, turn, none」の値を指定することで動作が加わります。
デフォルトの場合は「"none"」で指定されており何も起きない状態になっています。

【フェードインするポップアップ】

ポップアップを表示(フェードイン) »

ポップアップでのメッセージ

サンプルはこちら

【フリップするポップアップ】

ポップアップを表示(フリップ) »

ポップアップでのメッセージ

サンプルはこちら

【横からフローするポップアップ】

ポップアップを表示(フリップ) »

ポップアップでのメッセージ

サンプルはこちら

【ポップに表示するポップアップ】

ポップアップを表示(ポップ) »

ポップアップでのメッセージ

サンプルはこちら

【スライドダウンするポップアップ】

ポップアップを表示(スライドダウン) »

ポップアップでのメッセージ

サンプルはこちら

【スライドフェードインするポップアップ】

ポップアップを表示(スライドフェードイン) »

ポップアップでのメッセージ

サンプルはこちら

【スライドアップするポップアップ】

ポップアップを表示(スライドアップ) »

ポップアップでのメッセージ

サンプルはこちら

【ターンするポップアップ】

ポップアップを表示(ターン) »

ポップアップでのメッセージ

サンプルはこちら

ポップアップ表示の位置を示す要素一覧

ポップアップ表示の位置を指定する際に利用する要素一覧をご紹介します。

パラメーター	説明
セレクター式	指定された要素の中央
origin	リンクの中央に指定（デフォルト値）
window	ウィンドウの中央に指定

ポップアップの属性として利用するパラメーター一覧

ポップアップ表示の属性として利用するパラメーター一覧をご紹介します。

パラメーター	説明	デフォルト値
data-corners	角丸を指定	false
data-shadow	影効果を付与	true
data-theme	テーマを指定	null
data-overlay-theme	ページ全体を覆うテーマ	null
data-tolerance	テーマを指定	位置を指定（top, right, bottom, left）