jQueryMobile - SimpleDialog2

Home

jQuery Mobile Framework :: SimpleDialog

A Popup Dialog Box for jQueryMobile

jQM Native Dialog Mode

This shows the jQM Native Dialog mode. Note that the example code below shows the FORCED use of the dialog. If you wish to use the "only on small screens" mode (less than 400px wide), only set 'dialogAllow' to true.

Open Dialog HTML
<a href="#" id="opendialog" data-role="button">Open Dialog</a>
jQuery
$(document).delegate('#opendialog', 'click', function() {
  // NOTE: The selector can be whatever you like, so long as it is an HTML element.
  //       If you prefer, it can be a member of the current page, or an anonymous div
  //       like shown.
  $('<div>').simpledialog2({
    mode: 'blank',
    headerText: 'Some Stuff',
    headerClose: true,
    dialogAllow: true,
    dialogForce: true,
    blankContent : 
      "<ul data-role='listview'><li>Some</li><li>List</li><li>Items</li></ul>"+
      // NOTE: the use of rel="close" causes this button to close the dialog.
      "<a rel='close' data-role='button' href='#'>Close</a>"
  })
})