ポップアップは、ページの一部をオーバーレイする点でダイアログと似ています。 ポップアップボックスは、小さなテキスト、写真、地図、またはその他のコンテンツを表示する場合に便利です。
ポップアップを作成するには、<a> 要素と <div> 要素で始めます。 data-rel="popup" 属性を <a> に追加し、data-role="popup" 属性を <div> に追加します。 次に、<div> に id を指定し、<a> の href に指定した id と一致するように設定します。 <div> 内のコンテンツは、ユーザーがリンクをクリックしたときにポップアップする実際のコンテンツです。
注: ポップアップ <div> は、リンクと同じページ内になければなりません。
<a href="#myPopup" data-rel="popup" class="ui-btn ui-btn-inline ui-corner-all">Show Popup</a>
<div data-role="popup" id="myPopup">
<p>This is a simple popup.</p>
</div>
Try it Yourself »ポップアップ・ボックスに余分にパディングとマージンが必要な場合は、<div> に "ui-content" クラスを追加します：If you want some extra padding and margin in your popup box, add the "ui-content" class to <div>:
デフォルトでは、ポップアップ・ボックスの外側をクリックするか、 "Esc" キーを押すことでポップアップを閉じることができます。 ボックスの外側をクリックしても、ポップアップを閉じようにするには、ポップアップに data-dismissible="false" 属性を追加します（実際には推奨しません）。 ポップアップの閉じるボタンを、右または左に追加することもできます。これを行うには、data-rel="back" 属性を持つボタンリンクをポップアップコンテナに追加し、 CSS クラスによりボタンを配置します。
| 説明 | 例 |
|---|---|
| 右閉じボタン | Try it |
| 左閉じボタン | Try it |
| ポップアップ不可 | Try it |
デフォルトでは、クリックされた要素の直ぐ上にポップアップが表示されます。 ポップアップの位置を制御するには、 ポップアップを開くために使用するリンクに data-position-to 属性を使用します。
ポップアップを配置する方法には、次の3つがあります：
| 属性値 | 説明 |
|---|---|
| data-position-to="window" | ポップアップは、ウィンドウの中央に表示されます |
| data-position-to="#myId" | ポップアップは、指定された #id を持つ要素の上に配置されます |
| data-position-to="origin" | デフォルト。 ポップアップは、クリックされた要素の直ぐ上に配置されます |
<a href="#myPopup1" data-rel="popup" class="ui-btn" data-position-to="window">Window</a>
<a href="#myPopup2" data-rel="popup" class="ui-btn" data-position-to="#demo">id="demo"</a>
<a href="#myPopup3" data-rel="popup" class="ui-btn" data-position-to="origin">Origin</a>
Try it Yourself »デフォルトでは、ポップアップには遷移効果が追加されていませんが、「遷移」の章で紹介した効果のいずれかを使用することができます。 単に、ポップアップを開くリンクに data-transition="value" 属性を適用するだけです：
<a href="#myPopup" data-rel="popup" class="ui-btn" data-transition="fade">Fade</a>
Try it Yourself »ポップアップのボーダーに矢印を追加するには、data-arrow 属性を使用し、値 "l" (左)、"t" (上)、"r" (右)、"b" (下) を指定します：
<a href="#myPopup" data-rel="popup" class="ui-btn">Open Popup</a>
<div data-role="popup" id="myPopup" class="ui-content" data-arrow="l">
<p>There is an arrow on my LEFT border.</p>
</div>
Try it Yourself »標準のダイアログ・マークアップをポップアップに追加することができます（ヘッダー、コンテンツ、フッターのマークアップ）：
<a href="#myPopupDialog" data-rel="popup" class="ui-btn">Open Dialog Popup</a>
<div data-role="popup" id="myPopupDialog">
<div data-role="header"><h1>Header Text..</h1></div>
<div data-role="main" class="ui-content"><p>Some text..</p><a href="#">some links..</a>
<div data-role="footer"><h1>Footer Text..</h1></div>
</div>
Try it Yourself »ポップアップで画像を表示することもできます：
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg" alt="Skaret View" style="width:200px;"></a>
<div data-role="popup" id="myPopup">
<img src="skaret.jpg" style="width:800px;height:400px;" alt="Skaret View">
</div>
Try it Yourself »注: ポップアップは、画像のセット全体（500枚の画像を含むアルバムのような）を表示するような場合は不適切です。 しかし、数枚の画像を大きく表示する必要があるような場合には、よく適合します。
data-overlay-theme 属性により、ポップアップの後（ページ自体）の背景色を制御することができます。
デフォルトでは、オーバレイは透明です。明るいオーバレイを追加するには data-overlay-theme="a" を使用し、薄暗いオーバレイを追加するには data-overlay-theme="b" を使用します：
<a href="#myPopup" data-rel="popup">Show Popup</a>
<div data-role="popup" id="myPopup"
data-overlay-theme="b">
<p>I have a dark background behind me.</p>
</div>
Try it Yourself »オーバレイ効果は、写真のポップアップによく使用されます：
<a href="#myPopup" data-rel="popup" data-position-to="window">
<img src="skaret.jpg" alt="Skaret View" style="width:200px;"></a>
<div data-role="popup" id="myPopup"
data-overlay-theme="b">
<img src="skaret.jpg" style="width:800px;height:400px;" alt="Skaret View">
</div>
Try it Yourself »注: フォームやリストビューでポップアップを使用する方法については、後の章でも学習します。