Webデザイナーブログから学ぶホームページ制作

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

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

ポップアップ表示を行いたい場合は、ポップアップとして表示すべき領域に「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>

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

ポップアップ表示を吹き出し付きにしたい場合は、ポップアップ「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>

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

ポップアップ表示に動作を加えたい場合は、「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>

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

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

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