2021.12.6|JavaScript

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

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

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

jQuery Mobileを利用してポップアップを設定する方法を解説します。

jQuery Mobile要素を使ってポップアップを設定する方法

1.ポップアップを配置

ポップアップ表示を行いたい場合は、ポップアップとして表示すべき領域に「data-role=”popup」要素で指定して配置します。
「href」属性に「#id」要素を利用して表示されるポップアップを指定します。
また、呼び出し先がポップアップであることを「data-rel=”popup”」属性で指定します。

ポップアップ
<a href="#popup01" data-rel="popup" data-transition="pop">テキストをクリック</a>
<div data-role="popup" id="popup01">
<p>ポップアップで表示されます</p>
</div>
位置を指定したポップアップ

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

<a href="#popup01" data-rel="popup" data-transition="pop">テキストをクリック</a>
<div data-role="popup" id="popup01" data-tolerance="150,150,150,150">
<p>ポップアップで表示されます</p>
</div>
テキストのアイコンに指定したポップアップ
<p>右のアイコンをクリック<a href="#popupInfo" data-rel="popup" data-transition="pop" class="my-tooltip-btn ui-btn ui-alt-icon ui-corner-all ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" title="Learn more">Learn more</a></p>
<div data-role="popup" id="popupInfo" class="ui-content" data-theme="a" style="max-width:350px;">
<p>ポップアップで表示されます</p>
</div>

実装サンプルを作りましたのでこちらでも確認してみてください。
ヘッダーとフッターサンプル

2.ポップアップに属性を加えて設置

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

吹き出し付きポップアップ
<p>右のアイコンをクリック<a href="#popup01" data-rel="popup" data-transition="pop" class="my-tooltip-btn ui-btn ui-alt-icon ui-corner-all ui-nodisc-icon ui-btn-inline ui-icon-info ui-btn-icon-notext" title="Learn more">Learn more</a></p>
<div data-role="popup" id="popup01" class="ui-content" data-theme="a" style="max-width:350px;">
<p>ポップアップで表示されます</p>
</div>
角丸を解除したポップアップ

※角丸を解除するには「data-corners=”false”」を指定します。

<p><a href="#popup02" data-rel="popup">ポップアップを表示 »</a></p>
<div data-role="popup" id="popup02" data-corners="false">
<p>ポップアップでのメッセージ</p>
</div>
影を解除したポップアップ

※影を解除するには「data-shadow=”false”」を指定します。

<p><a href="#pop1" data-rel="popup">ポップアップを表示 »</a></p>
<div data-role="popup" id="pop1" data-shadow="false">
<p>ポップアップでのメッセージ</p>
</div>
閉じるボタンをつけたポップアップ

※閉じるボタンを表示させる場合、a要素に「data-rel=”back”」を指定し、ボタンになるアイコンを配置すれば表示されます。

<p><a href="#popup07" data-rel="popup">ポップアップを表示 »</a></p>
<div data-role="popup" id="popup07" data-shadow="false">
<a href="#" data-rel="back" class="ui-btn ui-icon-delete ui-btn-right ui-btn-icon-notext ui-corner-all">Close</a>
<p>ポップアップでのメッセージ</p>
</div>
背景色をグレーにするオーバーレイポップアップ

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

<p><a href="#popup07" data-rel="popup">ポップアップを表示 »</a></p>
<div data-role="popup" id="popup07" data-shadow="false">
<a href="#" data-rel="back" class="ui-btn ui-icon-delete ui-btn-right ui-btn-icon-notext ui-corner-all">Close</a>
<p>ポップアップでのメッセージ</p>
</div>

実装サンプルを作りましたのでこちらでも確認してみてください。
ヘッダーとフッターサンプル

3.ポップアップに動作を加えて設置

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

フリップするポップアップ
<p><a href="#popup09" data-rel="popup" data-transition="fade">ポップアップを表示(フェードイン) »</a></p>
<div data-role="popup" id="popup09">
<p>ポップアップでのメッセージ</p>
</div>
フェードインするポップアップ
<p><a href="#popup09" data-rel="popup" data-transition="flip">ポップアップを表示(フリップ) »</a></p>
<div data-role="popup" id="popup09">
<p>ポップアップでのメッセージ</p>
</div>
横からフローするポップアップ
<p><a href="#popup09" data-rel="popup" data-transition="flip">ポップアップを表示(フリップ) »</a></p>
<div data-role="popup" id="popup09">
<p>ポップアップでのメッセージ</p>
</div>
ポップに表示するポップアップ
<p><a href="#popup09" data-rel="popup" data-transition="pop">ポップアップを表示(ポップ) »</a></p>
<div data-role="popup" id="popup09">
<p>ポップアップでのメッセージ</p>
</div>
スライドダウンするポップアップ
<p><a href="#popup09" data-rel="popup" data-transition="slidedown">ポップアップを表示(スライドダウン) »</a></p>
<div data-role="popup" id="popup09">
<p>ポップアップでのメッセージ</p>
</div>
スライドフェードインするポップアップ
<p><a href="#popup09" data-rel="popup" data-transition="slidefade">ポップアップを表示(スライドフェードイン) »</a></p>
<div data-role="popup" id="popup09">
<p>ポップアップでのメッセージ</p>
</div>
スライドアップするポップアップ
<p><a href="#popup09" data-rel="popup" data-transition="slideup">ポップアップを表示(スライドアップ) »</a></p>
<div data-role="popup" id="popup09">
<p>ポップアップでのメッセージ</p>
</div>
ターンするポップアップ
<p><a href="#popup09" data-rel="popup" data-transition="turn">ポップアップを表示(ターン) »</a></p>
<div data-role="popup" id="popup09">
<p>ポップアップでのメッセージ</p>
</div>

実装サンプルを作りましたのでこちらでも確認してみてください。
ヘッダーとフッターサンプル

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

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

ポップアップ表示の位置を示す要素一覧
要素 説明
セレクター式 指定された要素の中央
origin リンクの中央に指定(デフォルト値)
window ウィンドウの中央に指定
ポップアップ表示の位置を示すパラメーター一覧
パラメーター 説明 デフォルト値
data-corners 角丸を指定 false
data-shadow 影効果を付与 true
data-theme テーマを指定 null
data-overlay-theme ページ全体を覆うテーマ null
data-tolerance テーマを指定 位置を指定(top, right, bottom, left)

まとめ

クラスも指定要素も簡単に設置できるのが良いですね。
cssを自分で書いたりjavascriptを設定することもないので簡単にポップアップが設置できます。