jQuery Mobile Popups and Dialogs

Question

jQuery mobile 1.2 alpha introduces Popups while it already has a similar widget, called Dialogs. They both seem very similar in nature.

What are the technical differences between Popups and Dialogs?

What Popups can do (any practical usecase as example preferred) that is impossible with Dialogs?

Answer 1

They are quite different beast. Here is my opinion based on my limited experience.

Dialogues

• Dialogues take over the page, they contain a fullscreen dark background to make the "dialog" appear to have replaced the page.

• Any page can be presented as a dialog by adding the data-rel="dialog" attribute to the page anchor link.

• Like pages, you can specify any page transition you want on the dialog by adding the data-transition attribute to the link.

• Can be chained.

Popups

• Displays within the current page, and are probably more similar to the functionality commonly referred to as modals or lightboxes.

• Can't be chained.

Popups are probably more suited for alerts, tooltips, small yes/no ok/cancel messages, making a thumbnail popup into a larger image, small ajax forms(newsletter, login, post a comment) etc. Useful when you don't want to overload the page with information, and only want to reveal certain functionality to users when they need or request it.

Dialogues on the other hand could be used in situations where you need to convey a lot of information (terms and conditions acceptance screen, etc), or when you really want to emphasis an alert, menu, the choice a user has, etc. Dialogues kind of break the flow of a page so should be used more cautiously.

One neat feature of the popups is that they can be used as overlay panels, which could be used to create a menu that slides in from the side of the screen, not too dissimilar to the menu in the Facebooks iphone application.

At the end of the day, either could be used, and neither is right or wrong, a lot of it comes down to personal preference, and how you want your application to flow.

Answer 2

One important difference is Popups appear in the same page as an element, where as dialogue is a different page in all and the background is blank.