*

ポップアップを表示する

公開日: : 最終更新日: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

jQueryMobileカテゴリーで出てくる用語集

jQueryMobileの記事で登場する用語を下記の表にまとめました。学習するときの助けになるかも。

記事を読む

no image

data-属性により、ヘッダとフッタを常時表示する

前回の記事の続きです。 ヘッダとフッタを常時表示 ページのヘッダとフッタにdata-posi

記事を読む

no image

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

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

記事を読む

no image

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

値を選択するボタンは以下の2つがあります。 ・複数の値から1つだけを選択するウィジェット ラジ

記事を読む

no image

data-属性によるウィジェットの設定

テーマの他にもウィジェットにdata-属性を追加して、色々な事ができます。 ウィジェ

記事を読む

no image

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

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

記事を読む

no image

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

トグルスイッチ(toggle switch)とは、〇型のつまみを左右にドラッグして2つの値のうちどち

記事を読む

no image

ボタン内にアイコンを表示したり、デザインを変更する

ボタン内にアイコンを表示するには、リンクと同じように、data-icon属性、data-iconpo

記事を読む

no image

項目リストを設定する

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

記事を読む

no image

バルーンを表示、項目を分割、折り畳みやポップ内にlistviewを作成する。

バルーンとは、円形の囲みのことで、jQueryMobileでは、その内部に文字列を表示するために、実

記事を読む

スポンサードリンク

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 ↑