Dialogs & Popups

Dialogs & Popups are working fine but they will get some improvements in an update.

Dialog (external link)

Open dialog

Code

Link

<a href='dialog.html' data-rel='dialog' data-role='button' data-icon='external-link' data-inline='true'>Open Dialog</a>

dialog.html

<div data-role='popup' id='popupDialog' data-theme='b'>
 div data-role='header' data-theme='b'>
  <h1>Delete from library?</h1>
 </div>
 <div data-role='content' data-theme='b'>
  <p>This is a popup description...</p>
  <div class='showastabs center nobg'>
   <a href='#' data-rel='back' data-icon='ok' data-iconpos='left' data-role='button' data-inline='true'>Okay</a>
   <a href='#' data-rel='back' data-icon='delete' data-iconpos='left' data-role='button' data-inline='true'>Cancel</a>
  </div>
 </div>
</div>

Popup Dialog

Open popup dialog

Code

Link

<a href='#popupDialog' data-rel='popup' data-position-to='window' data-role='button' data-icon='external-link' data-transition='pop' data-inline='true'>Open popup dialog</a>

Popup #popupDialog

<div data-role='popup' id='popupDialog' data-theme='b'>
 div data-role='header' data-theme='b'>
  <h1>Delete from library?</h1>
 </div>
 <div data-role='content' data-theme='b'>
  <p>This is a popup description...</p>
  <div class='showastabs center nobg'>
   <a href='#' data-rel='back' data-icon='ok' data-iconpos='left' data-role='button' data-inline='true'>Okay</a>
   <a href='#' data-rel='back' data-icon='delete' data-iconpos='left' data-role='button' data-inline='true'>Cancel</a>
  </div>
 </div>
</div>

Delete from library?

This is a regular page, styled as a dialog. To create a dialog, just link to a normal page and include a transition and data-rel="dialog" attribute.

Sounds good Cancel