Question

I am trying to open a dialog box (data-rel=”dialog”) form a link in a Dropdown menu I have made. However; JQM keeps opening it in a full page view (data-role=”page”).

What is weirder is that the same dialog when opened from a button or listview on the same page opens up as a proper dialog (data-role=”dialog”).

If I launch the dialog first via the button; subsequent attempts to launch the dialog from the menu-item also show it as a dialog box. But if I launch the dialog first via the menu-item; it gets rendered as a page.

Link in menu-item (opens the dialog as a page)

<ul data-role="listview" data-inset="true">
    <li data-icon="false">
        <a href="#showDialog" data-rel="dialog">Show Dialog</a>
    </li>
</ul>

Link in button (opens the dialog as a dialog)

<a href="#showDialog" data-role="button" data-rel="dialog">Show Dialog</a>

Link in listview (opens the dialog as a dialog)

<ul data-role="listview" data-inset="true">
    <li><a href="#showDialog" data-rel="dialog">Show Dialog</a></li>
</ul>

Here’s a jsFiddle with this demo.

2 questions:

1) Why this difference in behavior?

2) How do I force the dialog to open as a dialog from the menu-item?

Answer 1

Figured out an answer to the 2nd part of my query:

Marking the div with data-role=”dialog” (instead of “page”) forces it to be rendered as a Dialogbox always.

<div data-role="dialog" id="showDialog">

Would still like to understand from someone why this difference in behavior.