modals.html

<div class="navbar">
  <div class="navbar-inner">
    <div class="left sliding"><a href="index.html" class="back link"><i class="icon icon-back"></i><span>Back</span></a></div>
    <div class="center sliding">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="pages navbar-through">
  <div data-page="modals" class="page">
    <div class="page-content">
      <div class="content-block">
        <div class="content-block-inner">
          <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 demo-alert">Alert</a></span><span class="col-33"><a href="#" class="button demo-confirm">Confirm</a></span><span class="col-33"><a href="#" class="button demo-prompt">Prompt</a></span></p>
          <p class="row"><span class="col-50"><a href="#" class="button demo-login">Login Modal</a></span><span class="col-50"><a href="#" class="button demo-password">Password Modal</a></span></p>
          <p class="row"><span class="col-50"><a href="#" class="button demo-actions">Action Sheet</a></span><span class="col-50"><a href="#" data-popup=".demo-popup" class="button open-popup">Popup  </a></span></p>
        </div>
      </div>
      <div class="content-block-title">Action Sheet To Popover</div>
      <div class="content-block">
        <div class="content-block-inner">
          <p>Action Sheet could be automatically converted to Popover (for tablets). This button will open Popover on tablets and Action Sheet on phones: <a href="#" style="display:inline-block; vertical-align:middle" class="button demo-actions-popover">Action/Popover</a></p>
        </div>
      </div>
      <div class="content-block-title">Picker Modal</div>
      <div class="content-block">
        <div class="content-block-inner">
          <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 demo-picker-modal">Picker Modal With Custom HTML</a></p>
        </div>
      </div>
      <div class="content-block-title">Modals Stack</div>
      <div class="content-block">
        <div class="content-block-inner">
          <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 demo-modals-stack">Open Multiple Alerts</a></p>
        </div>
      </div>
    </div>
  </div>
</div>