jquery移动对话框不起作用

Question

我正在尝试与 jquery.mobile-1.0.min 进行对话。 但问题是当我点击按钮时，对话框没有弹出。

为什么这个对话框不起作用？

这是小提琴 http://fiddle.jshell.net/xJ8D3/

• 您可以在菜单上查看“Page2”。

  主要

  <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>
  

  第2页

  <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>
  

  第3页

  <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>
  

Answer 1

您的对话页面必须与其他页面处于同一节点级别。更正了您的小提琴以打开第 3 页：

脚本：

<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

Answer 2

改变

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

到

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