「jQuery Mobile」を活用したスマートフォンサイト作成（中編）

「jQuery プラグイン」の利用（14）

画面中央にポップアップウィジェットを表示したい場合

　スマートフォンサイトやアプリでよく見られるポップアップウィジェットは、画面中央にポップアップが表示されます。必ず画面中央にポップアップウィジェットを表示したい場合は、オプション設定を変更する必要があります。ポップアップウィジェットを画面中央に表示した状態の画面は以下のとおりです。

図3　jQuery Mobileサンプル（1_1）画面

　パソコンで見るとこうした形になります。

図4　パソコンで見たjQuery Mobileサンプル（1_1）画面

　スクリプトの変更部分だけを示します。

［リスト2］ポップアップウィジェットの画面中央表示（jQuery_Mobile_sample1_1.html）

<!--8.ページ内容の設定-->
<div data-role="content">
	<a href="#popupsample" data-rel="popup" data-position-to="window"><b>ここをタッチ！</b></a></p>
</div>

　リンクの部分で「data-position-to="window"」を指定すると、ポップアップウィジェットが必ず画面中央に表示されるようになります。