jQueryMobile - SimpleDialog2

Home

jQuery Mobile Framework :: SimpleDialog

A Popup Dialog Box for jQueryMobile

Blank Mode "Inlining"

Should you choose to need it, blank mode can also be inlined into your page. More to follow, but with the right combination of selectors and events, you could probably not have to do per-page javascript (or a page switching master file).

Open Dialog HTML
<a href="#" id="opendialog" data-role="button">Open Dialog</a>

<!--NOTE: blankContent is set to TRUE, and the content goes IN the div. -->
<div id="inlinecontent" style="display:none" 
  data-options='{"mode":"blank","headerText":"Yo","headerClose":true,"blankContent":true}'>

    <ul data-role='listview'><li>Some</li><li>List</li><li>Items</li></ul>
    <a rel='close' data-role='button' href='#'>Close</a>
</div>
jQuery
$(document).delegate('#opendialog', 'click', function() {
  // NOTE: The selector is the hidden DIV element.
  $('#inlinecontent').simpledialog2();
})

Blank Mode "Inlining" - Adoption

Should you choose to need it, blank mode can also be inlined into your page. More to follow, but with the right combination of selectors and events, you could probably not have to do per-page javascript (or a page switching master file).

This method "adopts" the children, rather than HTML - useful for bringing forms in. This is probably the method you want.

Open Dialog HTML
<a href="#" id="opendialog" data-role="button">Open Dialog</a>

<!--NOTE: blankContent is set to TRUE, and the content goes IN the div. -->
<div id="inlinecontent" style="display: none;" 
  data-options='{"mode":"blank","blankContent":true,"blankContentAdopt":true,"headerText":"Select language","headerClose":false}'>
   
  <div data-role="fieldcontain">
    <fieldset data-role="controlgroup">
      <legend>Please select your langauge</legend>   
						
      <input type="radio" name="selectedLanguage" id="selectedLanguageEnglsih" value="en" />
      <label for="selectedLanguageEnglsih">English</label>
      <input type="radio" name="selectedLanguage" id="selectedLanguageSpanish" value="es" />
      <label for="selectedLanguageSpanish">Espaņol</label>
    </fieldset>
    <a rel='close' data-role='button' href='#'> Close </a>
  </div>
</div>
jQuery
$(document).delegate('#opendialog', 'click', function() {
  // NOTE: The selector is the hidden DIV element.
  $('#inlinecontent').simpledialog2();
})