modals.html

<div data-page="modals" class="page" >
  <div class="navbar">
    <div class="navbar-inner">
      <div class="left"><a href="index.html" class="back link icon-only"><i class="icon icon-back"></i></a></div>
      <div class="center">Modals</div>
      <div class="right"><a href="#" class="link open-panel icon-only"><i class="icon icon-bars"></i></a></div>
    </div>
  </div>
  <div class="page-content">
    <div class="content-block">
      <p>There are 1:1 replacements of native Alert, Prompt and Confirm modals. They support callbacks, have very easy api and can be combined with each other. Check these examples:</p>
      <p class="row"><span class="col-33"><a href="#" class="button button-raised demo-alert">Alert</a></span><span class="col-33"><a href="#" class="button button-raised demo-confirm">Confirm</a></span><span class="col-33"><a href="#" class="button button-raised demo-prompt">Prompt</a></span></p>
      <p class="row"><span class="col-50"><a href="#" class="button button-raised demo-login">Login Modal</a></span><span class="col-50"><a href="#" class="button button-raised demo-password">Password</a></span></p>
      <p class="row"><span class="col-50"><a href="#" class="button button-raised demo-actions">Action Sheet</a></span><span class="col-50"><a href="#" data-popup=".demo-popup" class="button button-raised open-popup">Popup  </a></span></p>
    </div>
    <div class="content-block-title">Action Sheet To Popover</div>
    <div class="content-block">
      <p>Action Sheet could be automatically converted to Popover (for tablets). This button will open Popover on tablets and Action Sheet on phones: </p>
      <p><a href="#" class="button button-raised demo-actions-popover">Action/Popover</a></p>
    </div>
    <div class="content-block-title">Picker Modal</div>
    <div class="content-block">
      <p>Such overlay type is similar to <a href="picker.html">Picker's</a> overlay, but also allows to create custom picker overlays</p>
      <p><a href="#" class="button button-raised demo-picker-modal">Picker Modal With Custom HTML</a></p>
    </div>
    <div class="content-block-title">Modals Stack</div>
    <div class="content-block">
      <p>This feature doesn't allow to open multiple modals at the same time, and will automatically open next modal when you close the current one. Such behavior is similar to browser native alerts: </p>
      <p><a href="#" class="button button-raised demo-modals-stack">Open Multiple Alerts</a></p>
    </div>
  </div>
</div>