ポップアップ(popup)とは、pageの上に付加情報や画像などのコンテンツを重ねて表示するウィジェットのことです。ウィジェットの隅にはアイコンを表示することができます。ダイアログと似ている点もありますが、それとは違い、ヘッダは表示しなくてもいいので、コンテンツのレイアウトをダイアログより自由にできます。また、ページの中に作成するのもポップアップのよくあります。
ポップアップの表示
ポップアップは、ウェジェット本体と、それを表示するためのリンクとの２つで成り立っています。リンクをクリックするかタップするかでウィジェット本体が画面に表示されて、ウィジェット以外の余白のどこかクリック、タップするとウェジェット本体が画面から消えます。
ウィジェットを作成するとき、HTMLタグは以下のようにします。
・ウィジェット本体 <div data-role="popup">
・リンク <a data-rel="popup">
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jqueryMobile ポップアップ</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <section id="page" data-role="page"> <header data-role="header"><h3>ヘッダ</h3></header> <article data-role="content"> <p><a href="#popupMsg" data-position-to="window">ポップアップ</a></p> </article> </section> <div id="popupMsg" data-role="popup"> <p>ポップアップ表示!</p> </div> </body> </html> |
表示位置の設定
ウィジェットの表示位置は<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"というような感じで、１つ、複数の数値の間に「,」で挟んだ文字列です。設定された数値が１つなら上下左右の余白が全て同じ値、２つなら、前の値が上下の余白、後の値が左右の余白の値です。数値が４つなら前から上、右、下、左の余白の値です。cssのmarginプロパティと同じ指定の方法です。
閉じるアイコンを表示する
ポップアップの隅には、これを閉じるためにクリック・タップするアイコンを表示できます。ウィジェットが画面いっぱいに表示されるときなど、このアイコンを表示することでウィジェットを閉じるための操作方法を知らせることができます。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jqueryMobile 閉じるためのアイコン</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <a href="#popupWidget" data-rel="popup">ポップアップ</a> <div id="popupWidget" data-role="popup"> <a href="#" class="ui-btn-right" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext">閉じる</a> <p class="ui-content">ポップアップ表示されました。</p> </div> </body> </html> |
ウィジェット内のコンテンツを目立つようにする
デフォルトの設定のままでコンテンツをウィジェットに表示すると、四角のウィジェットが憑依されますが。以下のように設定すると表示されるウィジェットのデザインを変更できます。
・data-corners="false" ウィジェットを角丸にしないで四角形を表示
・data-shadow="false" ウィジェット周辺に影はつけない
・data-overlay-theme属性 ウィジェットの背景に半透明のレイヤーを追加
ウィジェットには、文字列だけではなく、画像も表示できます。
サンプルコードの実行結果はこちら
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>jqueryMobile ポップアップで画像を表示</title> <link rel="stylesheet" href="../js/jquery.mobile-1.4.5.css"> <script src="../js/jquery-1.11.3.js"></script> <script src="../js/jquery.mobile-1.4.5.js"></script> </head> <body> <a href="#popupWidget" data-rel="popup" data-position-to="window">ポップアップ</a> <div id="popupWidget" data-role="popup" data-corner="false" data-shadow="false" data-overlay-theme="d"> <a href="#" class="ui-btn-right" data-role="button" data-rel="back" data-icon="delete" data-iconpos="notext">閉じる</a> <img src="../img/catejQueryMobile.png"> </div> </body> </html> |