jQueryMobileのダイアログ
jQuery Mobileでダイアログを表示するには、ボタンにdata-rel="dialog"属性を追加します。

<a href="confirm.html" data-role="button" data-rel="dialog">登録</a>
上記ではボタンを押すと、confirm.htmlが開きますがこのファイルがダイアログになります。
以下、confirm.htmlのサンプルです。登録を押すとregist.htmlに遷移し、キャンセルを押すと元画面に戻ります。

<div data-role="content">
  <div class="ui-grid-a">
    <div class="ui-block-a">
      <a href="regist.html" data-role="button">登録</a>
    </div>
    <div class="ui-block-b">
      <a href="/" data-role="button" data-rel="back">キャンセル</a>
    </div>
  </div>
</div>
ダイアログ画面のDEMOです。

jQueryMobileのpopupダイアログ
上述のダイアログでは別のhtmlでダイアログを実装しているダイアログの例です。その為、ダイアログ画面が表示された場合、背景に元画面が表示されません。
通常のダイアログは背景にページを表示しながらダイアログを表示すると思います。
以下のように内部リンクにしてdata-rel="popup"を指定すると、そのようなダイアログを表示することが可能です。

<div data-role="content">
  <a href="#popup" data-rel="popup" data-position-to="window" data-transition="pop" class="ui-btn">登録ボタン</a>
  
  <!-- ダイアログ -->
  <div data-role="popup" id="popup" data-overlay-theme="a" data-theme="a" data-dismissible="false" style="max-width:400px;">
    <div data-role="header" data-theme="a">
      <h1>確認画面</h1>
    </div>
    <div role="main" class="ui-content">
      <h3 class="ui-title">登録しますか?</h3>
      <a href="dialog_sample2.html" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a">登録</a>
      <a href="#" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-a" data-rel="back">Cancel</a>
    </div>
  </div>
</div>


以下、通常ダイアログのDEMOです。

Back to top

Information