The jquery mobile dialog box does not work

advertisements

I'm trying to make a dialog with jquery.mobile-1.0.min. But the problem is when I click the button, the dialog is not popping up.

why it is not working this dialog?

Here is the fiddle http://fiddle.jshell.net/xJ8D3/

  • You can check it "Page2" on the menu.

    main

    <nav data-role="navbar" class="menu">
        <a href="#main" class="ui-btn-active ui-state-persist">main</a>
        <a href="#page2">Page 2</a>
        <a href="#page3">Page 3</a>
    </nav>
    
    <section data-role="content">
        main
    </section>
    
    <footer data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </footer>
    
    

    page2

    <nav data-role="navbar" class="menu">
        <a href="#main">main</a>
        <a href="#page2" class="ui-btn-active ui-state-persist">Page 2</a>
        <a href="#page3">Page 3</a>
    </nav>
    
    <section data-role="content">
        page2
        <br>
    
        **<a href="#pagetwo">Click Dialog</a>
    
        <div data-role="page" data-dialog="true" id="pagetwo">
        <div data-role="main" class="ui-content">
        <a href="#pageone">Dialog Content</a>
        </div>
        </div>**
    
    </section>
    
    <footer data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </footer>
    
    

    page3

    <nav data-role="navbar" class="menu">
        <a href="#main">main</a>
        <a href="#page2">Page 2</a>
        <a href="#page3" class="ui-btn-active ui-state-persist">Page 3</a>
    </nav>
    
    <section data-role="content">
        page3page3
    </section>
    
    <footer data-role="footer" data-position="fixed">
        <h4>Page Footer</h4>
    </footer>
    
    

Your dialog page has to be on the same node level as the other pages. Corrected your fiddle to open page3:

script:

<div data-role="page" id="main">
...
</div>

<div data-role="page" id="page2">

    <section data-role="content">   

        <a href="#page3" data-rel="dialog">Click Dialog</a>

    </section>
...
</div>

<div data-role="page" id="page3">
...
</div>

jsFiddle:

Fiddle