# 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