jQuery Mobile ポップアップを設置する基本

ポップアップウィジェットは同じページ内のコンテンツブロックを、ポップアップウィンドウでオーバーレイさせて表示する機能です。ツールチップや写真の拡大表示でよく使われます。この記事では設置方法の基本とオプション指定について解説します。

«次の特集記事»
«前の特集記事»

【コンテンツ】

  1. ポップアップの概要
  2. 使用するデータ属性
  3. 基本的な設置方法
  4. 外観オプションの指定
  5. 表示位置オプションの指定
  6. 動作オプションの指定

【記事執筆時の環境】
jQuery Mobile 1.4.4/1.4.5

ポップアップの概要

ポップアップはダイアログと違い、同じページ内のコンテンツブロックをリンク先として指定します。
data-rel="popup"」をアンカーリンクに設定し、「data-role="popup"」をコンテンツブロックに設定します。

データ属性を使ったオプションでは、ポップアップの外観や表示位置を指定することができます。

ポップアップは利用範囲が広く、以下のような利用例が考えられます。

  • ツールチップ/注釈
  • インフォメーションボックス
  • 写真の拡大表示
  • ログインフォーム
  • ポップアップメニュー
  • ダイアログボックス

使用するデータ属性

データ属性 説明
data-arrow false | true | t | r | b | l ポップアップに吹き出し風の矢印をつけるかどうか
t,r,b,l は top,right,bottom,leftの意味
data-corners true | false ポップアップに角丸をつけるかどうか
data-dismissible true | false ポップアップの外側をクリックしたときポップアップを閉じるかどうか
data-history true | false ブラウザの履歴にポップアップを加えるかどうか
falseのときはブラウザの戻るボタンでポップアップを閉じることができない
data-overlay-theme swatch letter (a-z) ポップアップのオーバーレイ(背景)に適用するスウォッチ
デフォルトは "null"(透過背景)
data-position-to origin | window | selector ポップアップの表示位置、アンカーリンクに指定する
origin: リンクの上
window: ウィンドウのセンター
selector: 特定の要素の上
data-shadow true | false ポップアップに影をつけるかどうか
data-theme swatch letter (a-z) ポップアップに適用するスウォッチ
data-tolerance 30,15,30,15 ウィンドウの4つのコーナー(top, right, bottom, left)からの距離
data-transition fade | flip | flow | pop | slide | slidedown | slidefade | slideup | turn | none ポップアップが現れるとき/消えるときのエフェクト設定、アンカーリンクに指定する

基本的な設置方法

ポップアップを設置するには、アンカーリンクとコンテンツブロックの両方にデータ属性を記述する必要があります。

ポップアップで表示するコンテンツのあるブロックには、
コンテナであるdiv要素に「data-role="popup"」と記述します。
そしてリンク先として指定する id属性を記述します。

ポップアップを開くためのアンカーリンクには、
data-rel="popup"」と記述し、リンク先としてhref属性にコンテンツブロックのidを指定します。

コンテンツブロックを記述する場所ですが、ページウィジェットの中であればどこでも構いません。コンテンツのコンテナである「role="main"」を指定したdiv要素の中でなくても構いません。

なお、アンカーリンクには ui-linkクラス、コンテンツブロックには ui-popupクラスが自動的に付加されます。

以下は基本的な記述例です。ポップアップを閉じるには、ポップアップ外をクリックするか、ブラウザの戻るボタンをクリックしてください。

外観オプションの指定

角丸を解除する

デフォルトではポップアップボックスに角丸がついています。
これを解除するには、「data-corners="false"」を指定します。

影を解除する

デフォルトではポップアップボックスに影がついています。
これを解除するには、「data-shadow="false"」を指定します。

閉じるボタンをつける

ポップアップの外側をクリックすると閉じるようになっていますが、ボックスに明示的に閉じるボタンをつけることもできます。

閉じるボタンがついたポップアップ

a要素に「data-rel="back"」を指定し、さらにクラスでボタンになるアイコン種類と表示位置などを指定します。

以下は右上に×の形をしたアイコンをつけた例です。

デフォルトでは閉じるボタンがメッセージに重なってしまう可能性がありますので、上記の例ではmarginを1emに変更しています。

吹き出しにする

吹き出しのように、ボックスの1辺から小さな矢印が飛び出した形にすることができます。

吹き出しの形のポップアップ

data-arrow属性で矢印の飛び出す辺を指定します。
値は、"t"(top)、"r"(right)、"b"(bottom)、"l"(left)で指定します。"true" にすると、いずれかの辺が自動的に選ばれます。

テーマを変更する

data-theme属性でテーマ(スウォッチ)を変更できます。

以下は "b" にした例です。

オーバーレイテーマを変更する

デフォルトでは背景は透明ですので呼び出したページがそのまま表示されます。
data-overlay-theme属性では、背景のテーマを変更できます。
ポップアップに集中させたい場合に使えばいいでしょう。

オーバーレイテーマを指定したポップアップ

以下は "b" にした例です。

表示位置オプションの指定

表示位置を指定する

デフォルトではポップアップは、呼び出したアンカーリンクの上に表示されます。
data-position-to="origin | window | selector"」で表示位置を指定できます。このデータ属性は、呼び出すほうのアンカーリンクに指定します。

デフォルトは "origin" でアンカーリンクの上です。
"window"を指定すると、ウィンドウのセンターに表示されます。
特定の要素の上に表示したい場合は、 "selector" としてハッシュ(#)をつけてidを指定します。

以下の例では、特定の要素としてボーダーをつけたボックスを描いています。

ウィンドウ端からの距離を指定する

ポップアップを表示する位置として、ウィンドウ端からの距離でも指定できます。
data-tolerance="top,right,bottom,left"」で指定します。

top,right,bottom,leftにはそれぞれのウィンドウ端からの距離をpx単位で指定します。
距離は最小距離です。コンテンツ内容により表示するボックスサイズが変わり距離を合わせますが、ウィンドウサイズによっては必ずしもすべての距離が一致するとは限りません。

動作オプションの指定

トランジションエフェクトを指定する

data-transition属性で、ポップアップが現れるとき/消えるときのエフェクトを指定できます。このデータ属性は、呼び出すほうのアンカーリンクに指定します。

値は、fade, flip, flow, pop, slide, slidedown, slidefade, slideup, turn, none を指定できます。デフォルトはエフェクトのない "none" です。

閉じる動作を指定する

data-dismissible="false"」を指定すると、ポップアップ外をクリックしたり ESCキーを押しても、ポップアップが閉じなくなります。デフォルトは "true" です。

もし "false" を指定するなら、閉じる手段を別に用意してください。

ブラウザ履歴を残すか指定する

data-history="false"」を指定すると、ブラウザの履歴にポップアップが残らなくなります。したがってブラウザの戻るボタンでポップアップを閉じることができなくなります。デフォルトは "true" です。

この記事では、ポップアップの基本となる設定方法とオプション指定について解説しました。次の記事でポップアップの具体的な利用例を解説します。

«次の特集記事»
«前の特集記事»

スポンサーリンク

jQuery Mobile 特集記事

基本的な使い方

ウィジェットの設置

フォームの設置

イベント・動作設定

カスタマイズ

使い方の応用

オンライン講座

Webの基礎マスター講座ページへのリンク


連載講座:WordPressで作る簡単Webサイトページへのリンク

提供しているサービス

WordPressサイト制作出張講座ページへのリンク

WordPress を利用した Webサイト制作の方法を、
あなたのオフィスにうかがいご説明いたします。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>


Webサイト1日公開サービスページへのリンク

一刻も早く Webサイトが必要な方のために、
一緒に作業し1日で公開までもっていきます。
料金:¥45,000

サービス詳細ページ >>

申し込みフォーム >>

スポンサーリンク

ページの先頭へ