when using rel="external" to a dialog page the dialog does not get styled theres no round borders no shadow and no close button
Can you post a demo page for this issue?
I just built a test page and this is an issue. A role of dialog works in a mutlipage situation but not in a standalone page.
I don't think this is a bug. You can load external dialogs if you leave off the rel="external". The rel="external" Tells jqm to let the browser do it's normal link handling, which means the page it loads replaces the current application context.
Since the new page has no clue how it was invoked, it doesn't know it should display the page content as a dialog.
The issue is more that if you have a standalone page but want it to look like a dialog, if you set the data-role="dialog" on the wrapper in place of "page", it isn't styled. However, this already works on internal, multi-page situations.
Seeing Kin's comment, I think I'm still unsure of the use case for why you'd want or need to do this. It's wouldn't be for the non-JS or C-grade experience, because they don't see the dialog theming anyway. I think we intended dialogs to be a JS enhancement on top of a regular old page, right? So if it's external, as in requiring a page refresh to view it, it looks like a page (and requires a deep link, just like a page too), but if you bring it into the app in an overlay presentation, that's when it becomes styled as a dialog.
I know we discussed this yesterday and at the time I was more on the same page about it, so maybe you're thinking of a situation I'm forgetting.
in your multipage example, you still need to invoke the dialog from another page in that multipage doc, so the behavior is currently consistent all around. We'd have to allow deep linking to a dialog for this to work, but I'm not sure that's such a good idea...?
The use case would just be if you wanted to display something dialog-like in the a grade experience but were in a multi page document and the dialog wasn't in the DOM. Since some people will try this because we use the syntax in multi-page, if the fix is easy, let's do it. If it's a lot of work, I agree this is an edge case and it can be pushed down in priority.
Okay but I think that is possible now - as in - you can pull an external page into a multipage doc just fine, you just can't pull all of a multipage doc's pages in through ajax (only the first one will come through). That limitation is only there because the deep link URL would be really awkward otherwise.
I'm a bit confused here. What is Todd proposing we fix? I think things are fine the way they are, and if someone wants to replace the current application context (rel="external") with a page that looks like a dialog, then the only thing we need to do is make sure data-role="dialog" works?
To summarize what we need to fix: If you build a page and set the data-role to "dialog" instead of "page", it should be styled as a dialog with the inset appearance and bg layer even though it's a normal page. If you do this now, you get a blank page and that's bad.
In the latest jQuery Mobile, there is no difference between displaying a normal page and a dialog when using the changePage() function. However, if I use a button that links to it, the page/dialog will be displayed properly.
<body onLoad="setTimeout('$.mobile.changePage(\'#login\', \'slidedown\');', 2500);">
<div data-role="page" data-theme="a" id="startup">
<div data-role="content"><a href="#login" data-role="button" data-inline="true" data-rel="dialog" data-transition="slidedown">Login</a></div>
<div data-role="dialog" data-theme="a" id="login">
<div data-role="fieldcontain"><label for="login_user">User:</label><input type="text" id="login_user" value="" /></div>
<div data-role="fieldcontain"><label for="login_pass">Pass:</label><input type="password" id="login_pass" value="" /></div>
<button type="submit" aria-disabled="false">anmelden</button>
Is this working as expected in Beta 2?
As of 1.0, data-role="dialog" isn't supported but we have a new issue to add this feature: