How to create confirmation dialog in jQuery Mobile?

Question

I want the confirmation dialog (not plain javascript) to show when the user clicks a button, but I would prefer it to be embedded instead of linking to another page.

How to insert dialogue for use on jQuery Mobile page?

Answer 1

You have 2 options: if you want it to pop up and fill the page, you can create a JQM dialog page (even dynamically) and switch to it. JQM dialogs are described in detail here:

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

It is possible to add a new dialog box to the same page (just add it to the container above the one that has data-role = "page") and switch to it using $ .changePage (...)

Another option, if you want it to pop up on top of existing content (modal mode from the user interface dialog box), this plugin will do this:

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

Full disclosure: I wrote the second, so I'm biased. However, it uses a bit of option 1 above, and of course you can split the code to see how it works if you prefer to use your own.

Edit:

Another option is to use the built-in pop-up interface added to the latest major version (I think 1.2.0). It can be found here and is included in the default value:

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