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>
  

               

  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>
  

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>