jquery mobile dialog not working

问题

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>
  

回答1:

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

回答2:

change

**<a href="#pagetwo">Click Dialog</a>

to

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

来源：https://stackoverflow.com/questions/22276820/jquery-mobile-dialog-not-working