ダイアログ

ダイアログは、ユーザーに対して警告や注意をひくために、伝えたいことを表示します。ダイアログが表示されると、デフォルトでは背景が別の色に変わってダイアログ以外のウィジェットが操作できなくなります。これを閉じるには左上の「×」か、ブラウザの戻るボタンをクリックします。

ダイアログは以下の順序で作成します。

１．ダイアログに表示する内容をdata-role="dialog"を追加したタグで囲む。

ダイアログの構成はページとほとんど同じですが、以下の事が異なります。

・data-role属性値は"dialog"を設定する。
・フッタは含まない。

ダイアログが表示されたと、HTML文書のタイトルが元のタイトルタグで囲んだ文字列に変更されます。その後、ダイアログを閉じると、タイトルが直前に表示していたものに戻ります。

２．ダイアログとは異なるページにダイアログへのリンクを作成する。

ダイアログはページとは違い、単独で作成するものではないです。必ずダイアログを開くページと一緒に作成します。今回は、ページ内に作成したリンクにダイアログを設定します。このリンクをクリックするか、タップするとダイアログが開くようにします。

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

<!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">
			<h1>jQueryMobileのダイアログ</h1>
			<p><a href="#dialog">ダイアログを開く</a></p>
		</article>
	</section>

	<!-- リンクをクリックしたときに開かれるダイアログ  -->
	<section id="dialog" data-role="dialog" data-close-btn-text="閉じる">
	</section>
</body>
</html>

<!DOCTYPE html>

<head>

<title>jqueryMobile ダイアログを表示する</title>

</head>

<body>

<h1>jQueryMobileのダイアログ</h1>

<p><a href="#dialog">ダイアログを開く</a></p>

</article>

</section>

</section>

</body>

</html>

ダイアログとなる要素にdata-close-btn-text属性を追加すると、×印のツールチップでその値が表示されます。ツールチップはマウスカーソルを×に重ねると表示されます。

ページとダイアログの違い

以下の点です。
・ダイアログを囲むタグにdata-role="dialog"を付す
・通常はフッタは書かない
・ブラウザの進む・戻るボタンでは表示されない

jQueryMobileのデフォルトだと、ダイアログを閉じた後、ブラウザの進むボタンの操作でページを進めても、ダイアログは表示されません。これはダイアログを表示するときのURLがページとは違うからです。

ダイアログを開くとき、URLの末尾に特殊な文字列が追加されて、ページとは異なるものとしてみなされます。そのためブラウザのボタンでページを進めてもダイアログは表示されません。

ページをダイアログとして表示する

ページをダイアログとして表示するには、ページへのリンク先が設定されたaタグにdata-rel="dialog"という属性を追加する。
例

	<a href="sample.html" data-rel="dialog">ページをダイアログとして表示する</a>

1	<a href="sample.html" data-rel="dialog">ページをダイアログとして表示する</a>