Add support for data-role="dialog" #3276

toddparker opened this Issue Dec 15, 2011 · 13 comments


None yet

5 participants


We're seeing some people try and use data-role="dialog" which isn't a valid role yet in the framework. You make a dialog by linking with data-rel="dialog" on a link but in non-ajax situations, people must be trying this instead. The dialog role results in a blank page because it's not valid today.

For 1.1 we can try and re-work the navigations script to support data-role="dialog" so dialog appearance can work in non-Ajax nav situations. This is mostly the same as the normal page enhancements, but the dialog classes to give it an inset appearance need to be support the normal dialog config attributes for the overlay swatch and such.

Test page:

This shows up blank if you have a role of dialog instead of page.

@johnbender johnbender was assigned Dec 15, 2011

This would be great, since it would make things like the 2-step dialog I'm trying to create easier.


I've just found that having step 2's URL as the action attribute value for the form in step 1 of my 2-step dialog works fine, but only if the step 2 page has data-role="dialog" instead of data-role="page" on the outermost div. From the wording of the issue-starting post, I wouldn't expect that to work. Is this intentional?


That's interesting. I'm beginning to think that this role is supported somewhere in the code, but not intentionally/consistently. This will fix that issue.


Good, that means I won't need to find another way to do this. :)


toddparker, I think data-role="dialog" is already supported and seems to be working fine for me (at least with default pop transition on Chrome and it slides up in FF). I did not use data-rel="dialog" here.

Also, refer the Dialogs section,

Test here:


I just removed the mention of data-role="dialog" until it is properly support. I think that page was causing confusion:

The issue is that the dialog role is supported in multi-page, but not standalone so it's just confusing right now.


hi toddparker, by standalone I assume you mean single-page template? Correct me on this ...
If it is single-page, then check this here:

Can you provide a test case that it fails so I understand better...


Sure, just try to open a standalone page witha data-role of dialog and you get a blank page:


Ah thanks! Now I see :)



Per our discussion some time ago I have it alter the initial page to the page data role if it's a dialog. This at least lets the page render.


@johnbender - Looks like you fixed the blank page issue. If making this have the inset appearance will be difficult, we can close this and open a new issue for 1.2 to support the inset style.

@scottjehl scottjehl pushed a commit that referenced this issue Feb 23, 2012
scottjehl added a failing unit test for issue #3276 - support for data-role="di…
@scottjehl scottjehl pushed a commit that closed this issue Feb 23, 2012
scottjehl Added support for data-role="dialog". When a dialog is the first "pag…
…e"-type element in the DOM, jQM will enhance it, triggering dialog enhancements as usual for non-ajax environments. Updated the /docs/pages/dialog.html page's role to date-role="dialog" to demonstrate the change. Fixes #3276.
@scottjehl scottjehl closed this in 95bffbb Feb 23, 2012

@toddparker and @johnbender - I just wanted to follow up and make sure this looked okay for you guys.


Awesome Scott - that's perfect.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment