*

ポップアップを表示する

公開日: : 最終更新日:2016/04/22 jQueryMobile

ポップアップ(popup)とは、pageの上に付加情報や画像などのコンテンツを重ねて表示するウィジェットのことです。ウィジェットの隅にはアイコンを表示することができます。ダイアログと似ている点もありますが、それとは違い、ヘッダは表示しなくてもいいので、コンテンツのレイアウトをダイアログより自由にできます。また、ページの中に作成するのもポップアップのよくあります。

ポップアップの表示

ポップアップは、ウェジェット本体と、それを表示するためのリンクとの2つで成り立っています。リンクをクリックするかタップするかでウィジェット本体が画面に表示されて、ウィジェット以外の余白のどこかクリック、タップするとウェジェット本体が画面から消えます。

ウィジェットを作成するとき、HTMLタグは以下のようにします。
・ウィジェット本体 <div data-role=”popup”>
・リンク <a data-rel=”popup”>

サンプルコードの実行結果はこちら

表示位置の設定

ウィジェットの表示位置は<a data-position-to=”***”>、<div data-tolerance=”***”>のように、リンクやウィジェットにdata-属性をそれぞれのHTMLタグに追加することで設定することが可能です、ただ、設定はウィジェットが画面からはみ出さないことが条件です。はみ出すように設定しても自動的に調整されます。

data-position-toはウィジェットを表示するリンクに追加する属性で、ウィジェットを表示する位置の基準となる要素を指定します。設定できる値は”origin”,”window”、セレクタで、”origin”はウィジェットにリンクしたaタグなど、ポップアップの表示を行う要素を表していて、”window”は画面全体の中央を表しています。

data-toleranceはウィジェット本体に追加する属性で、ウィジェットを表示するときに、最低限必要な上下左右のマージン(余白)を設定できます。設定できる値(単位はpx)は、”16″,”16,16″や”10,40,30,20″というような感じで、1つ、複数の数値の間に「,」で挟んだ文字列です。設定された数値が1つなら上下左右の余白が全て同じ値、2つなら、前の値が上下の余白、後の値が左右の余白の値です。数値が4つなら前から上、右、下、左の余白の値です。cssのmarginプロパティと同じ指定の方法です。

閉じるアイコンを表示する

ポップアップの隅には、これを閉じるためにクリック・タップするアイコンを表示できます。ウィジェットが画面いっぱいに表示されるときなど、このアイコンを表示することでウィジェットを閉じるための操作方法を知らせることができます。

サンプルコードの実行結果はこちら

ウィジェット内のコンテンツを目立つようにする

デフォルトの設定のままでコンテンツをウィジェットに表示すると、四角のウィジェットが憑依されますが。以下のように設定すると表示されるウィジェットのデザインを変更できます。
・data-corners=”false” ウィジェットを角丸にしないで四角形を表示
・data-shadow=”false” ウィジェット周辺に影はつけない
・data-overlay-theme属性 ウィジェットの背景に半透明のレイヤーを追加

ウィジェットには、文字列だけではなく、画像も表示できます。

サンプルコードの実行結果はこちら

スポンサードリンク

関連記事

no image

項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグループ化が有効です。グループ化され

記事を読む

no image

項目リストを設定する

項目リスト(listview)は、ふくすうの項目を列挙するためのウィジェットで、項目には文字列や、画

記事を読む

no image

ページ(page)とは

jQueryMobileでは、スマートフォンの画面に表示するページ(page)というウィジェットで構

記事を読む

no image

コンテンツを表示する

コンテンツはそのページのメインとなる情報を表示する部分です。コンテンツはヘッダとフッタの間に配置しま

記事を読む

no image

リンク先を設定したり、アイコンを利用する。

リンク(link)とは、次の画面に表示するコンテンツを表すもので、HTMLではaタグで表します。jQ

記事を読む

no image

ボタンを設定する

前回の記事では<a data-role="button">によるボタンを取り上げましたが

記事を読む

no image

移動しないヘッダ、フッタにIDを設定する

MozillaやWebkitベースのブラウザでは、リンクにdata-transition="slid

記事を読む

no image

jQueryMobileとフォームを組み合わせてみる

フォーム(user-submittable form)は、HTMLタグでは<form>タ

記事を読む

no image

折りたたみを設定する

おりたたみ(collapse)は、予め概要を示す文字列が表示されている領域をクリックかタップすると、

記事を読む

no image

class属性によりレイアウトとテーマを設定する

ウィジェットが画面に表示されるとき、HTMLタグには様々なclass属性が追加されます。これらはCS

記事を読む

スポンサードリンク

Message

メールアドレスが公開されることはありません。

CAPTCHA


次のHTML タグと属性が使えます: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">



スポンサードリンク

jQueryMobile
トグルスイッチを設定する

トグルスイッチ(toggle switch)とは、〇型のつまみを左右に

jQueryMobile
項目選択の複数ウィジェットをグループ化する

年月日など、複数のリストから同時に選択したいとき、ウィジェットのグルー

jQueryMobile
<select>により項目選択

ボタンによる選択では、1つの項目だけ選択するか、複数を同時に選択するか

jQueryMobile
値を選択するボタンを表示する

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだ

jQueryMobile
ボタンを設定する

前回の記事では<a data-role="button">

→もっと見る

  • スポンサーリンク

PAGE TOP ↑