[jQuery mobile]dialogの実装方法

今日は、dialogについてDialogsを読みながら実装する。

呼び出し元は、下のように記述

<div data-role="page"> <div data-role="content"> <a href="./dialog.html" data-role="button" data-inline="true" data-rel="dialog" data-transition="pop">Open dialog</a> </div> </div>

すると、このようになります。

呼び出し先は、↓のように、実装

<div data-role="dialog"> <div data-role="header" data-theme="d"> <h1>Hoge</h1> </div> <div data-role="content" data-theme="c"> <h1>動作確認</h1> <p>This page is the Dialog test.</p> <a href="#" data-rel="back" data-role="button" data-theme="b">Ok</a> <a href="#" data-rel="back" data-role="button" data-theme="c">Cancel</a> </div> </div>

タッチすると、このようになります。