How do I create a confirmation dialog in jQuery Mobile?

Question

I want to have a confirmation dialog (not plain javascript) show when the user clicks a button, but I'd rather have it embeded instead of referencing another page.

How do I embed a dialog for use on a jQuery Mobile page?

Answer 1

You have 2 options really - if you want it to popup and fill the page, you can create a JQM dialog page (even dynamicaly), and switch to it. JQM dialogs are explained more in detail here:

http://jquerymobile.com/demos/1.0b1/docs/pages/docs-dialogs.html

It is quite possible to append a new dialog to the same page (simple append it to the container above the one with data-role="page") and switch to it with $.changePage(...)

Another option, if you want it to popup "over" the existing content (modal mode from UI dialog), this plugin will do that:

http://dev.jtsage.com/jQM-SimpleDialog/

Full disclosure: I wrote the second one, so I am biased. However, it does employ a bit of option 1 above, and you are of course welcome to rip the code apart to see how it works if you'd rather roll your own.

Edit:

Another option is to use the builtin popup interface, added in the last major version (1.2.0 I think). It can be found here, and is included in the default:

http://jquerymobile.com/demos/1.2.0/docs/pages/popup/index.html