jQuery Mobileポップアップ

jQueryのモバイルポップアップ

彼らは両方のページの一部を重ねることでポップアップは、ダイアログに似ています。 あなたは小さなテキスト、写真、地図やその他のコンテンツを表示したいときにポップアップボックスが役立ちます。

ポップアップを作成するには、で始まる<a>要素と<div>要素。 追加data-rel="popup"する属性<a> 、およびdata-role="popup"に属性を<div> 。 その後のIDを指定し<div>および設定hrefの<a>指定されたidと一致します。 内のコンテンツ<div>ユーザーがリンクをクリックしたときにポップアップ表示されます実際のコンテンツです。

注：ポップアップ<div>のリンクと同じページ内でなければなりません。

あなたはポップアップボックスにいくつかの余分なパディングとマージンをしたい場合は、追加"ui-content"にクラスを<div>

ポップアップを閉じます

デフォルトでは、ポップアップがポップアップボックスの外側をクリックするか、または押すことによってのいずれか閉じることができ"Esc"キーを押します。 あなたはポップアップボックスの外側をクリックして閉鎖可能にしたくない場合は、追加することができdata-dismissible="false"ポップアップに属性（実際にはお勧めしませんが）。 また、右または左のいずれかに置かれ、ポップアップに閉じるボタンを追加することができます。 これを行うと、ボタンのリンクを追加するにはdata-rel="back"ポップアップコンテナに属性を、およびCSSクラスによってボタンを配置します。

ポジショニングポップアップ

デフォルトでは、ポップアップがクリックされた要素の上に直接表示されます。 ポップアップの位置を制御するには、データ位置するポップアップを開くために使用されているリンク上で属性を使用しています。

ポップアップを配置する3つの方法があります。

トランジション

デフォルトでは、ポップアップはそれらに追加された任意のトランジション効果を持っていません。 あなたは、私たちが「トランジション」の章で紹介していることの効果のいずれかを使用することができます。 ただ、ポップアップを開くリンクへのデータ遷移= "value"属性を適用します。

ポップアップ矢印

、ポップアップの境界線にある矢印を追加し、データ-矢印属性を使用して、値を指定するには"l" (left), "t" (top), "r" (right)または"b" (bottom) ：

ポップアップ・ダイアログ

あなたはポップアップ（ヘッダー、コンテンツとフッターのマークアップ）に標準のダイアログマークアップを追加することができます。

ポップアップ写真

また、ポップアップで画像を表示することができます。

注意：あなたは（500画像をアルバムのように）表示したい画像の全体のセットを持っているときにポップアップが理想的ではありません。 しかし、大きく表示される必要がある画像のカップルのための - 彼らは完璧です。

ポップアップオーバーレイ

あなたがポップアップ（ページ自体）の背景色を制御することができdata-overlay-theme属性。

デフォルトでは、オーバーレイは透明です。 使用data-overlay-theme="a"暗いオーバーレイを追加するために、光オーバーレイおよびデータ・オーバーレイ・テーマ=「B」を追加します：

オーバーレイ効果は、多くの場合、ポップアップの写真に使用されます。

注意：また、後の章でフォームとリストビューでポップアップを使用する方法を学習します。