Blank / Freeform Mode

This shows the general format for blank or freeform mode - Your own HTML in a dialog. (Please also see next demo for limitations).

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,
    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>"
  })
})

Custom Select Limitations

Due to how custom selects work, it might be a very bad idea to use them in a dialog. Short ones, in the default display mode *will* work (and they get cleaned up along with simpledialog too). If using 'dialogAllow' or 'dialogForce', the selects *will* be converted to native select menus instead - they do not play well together.

Open Dialog HTML

<p>You have entered: <span id="buttonoutput"></span></p>

<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,
    blankContent : 
      '<select data-native-menu="false" name="select-choice-0" id="select-choice-1">'+
      '<option value="standard">Standard: 7 day</option>' +
      '<option value="rush">Rush: 3 days</option>' +
      '<option value="express">Express: next day</option>'+
      '<option value="overnight">Overnight</option>'+
      '</select>'+
      // NOTE: the use of rel="close" causes this button to close the dialog.
      "<a rel='close' data-role='button' href='#'>Close</a>"
  })
})