jquery手机对话框不工作 [英] jquery mobile dialog not working

问题描述

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

为什么它不工作这个对话？

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

• 您可以在菜单上查看Page2。 / p>
  
  
  
  

  主要

  
  
  
  

   < nav data-role =navbarclass =menu> 
  < a href =＃mainclass =ui-btn-active ui-state-persist> main< / a> 
  < a href =＃page2> Page 2< / a> 
  < a href =＃page3>第3页< / a> 
  < / nav> 
   
  < section data-role =content> 
   main 
  < / section> 
   
  < footer data-role =footerdata-position =fixed> 
  < h4>页脚< / h4> 
  < / footer> 
    

  
  
  
  
  
  
  

  page2

  
  
  
  

   < nav data-role =navbarclass =menu> 
  < a href =＃main> main< / a> 
  < a href =＃page2class =ui-btn-active ui-state-persist> Page 2< / a> 
  < a href =＃page3>第3页< / a> 
  < / nav> 
   
  < section data-role =content> 
   page2 
  < br> 
   
   **< a href =＃pagetwo>点击对话框< / a> 
   
  < div data-role =pagedata-dialog =trueid =pagetwo> 
  < div data-role =mainclass =ui-content> 
  < a href =＃pageone>对话框内容< / a> 
  < / div> 
  < / div> ** 
   
  < / section> 
   
   
   
  < footer data-role =footerdata-position =fixed> 
  < h4>页脚< / h4> 
  < / footer> 
    

  
  
  
  
  
  
  

  page3

  
  
  
  

   < nav data-role =navbarclass =menu> 
  < a href =＃main> main< / a> 
  < a href =＃page2> Page 2< / a> 
  < a href =＃page3class =ui-btn-active ui-state-persist>第3页< / a> 
  < / nav> 
   
  < section data-role =content> 
   page3page3 
  < / section> 
   
  < footer data-role =footerdata-position =fixed> 
  < h4>页脚< / h4> 
  < / footer> 
    

  
  
  

解决方案

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

脚本：

  div data-role =pageid =main> 
 ... 
< / div> 
 
< div data-role =pageid =page2> 
 
< section data-role =content> 
 
< a href =＃page3data-rel =dialog>点击对话框< / a> 
 
< / section> 
 ... 
< / div> 
 
 
< div data-role =pageid =page3> 
 ... 
< / div> 
  

jsFiddle：

小提琴

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

这篇关于jquery手机对话框不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！