Opening JqueryMobile Dialog via JS function

Question

i am trying to open a Jquery Mobile dialog via JS function but its not working for me here is the function

function showSettings()
{
 document.getElementById('settings').style.display = 'none';
 document.getElementById('passwordView').style.display = 'block';
 $.mobile.changePage('#myPopupDialog', 'pop', true, true);
}

and here is the jsFiddle http://jsfiddle.net/7C8Lw/

Answer 1

You have to differntiate between Dialog and Popup widgets. A Dialog is a page but in shape of a dialog. Hence, Dialog div should be placed outside page div.

<div data-role="page">
  <!-- content -->
</div>

<div data-role="dialog">
  <!-- content -->
</div>

Demo