2013-08-17 2 views
5

Sono sicuro che mi manca solo qualcosa di base, ma qualcuno può vedere qualcosa di sbagliato con il seguente codice? Quando faccio clic sul primo pulsante, non si apre un popup. Il secondo pulsante apre il popup come una finestra di dialogo.Impossibile ottenere un popup per funzionare in jQuery Mobile

<!DOCTYPE html> 
<html> 
<head> 
    <!-- JQUERY MOBILE CSS --> 
    <link rel="stylesheet" href="//codeorigin.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" /> 
    <!-- JQUERY --> 
    <script src="//codeorigin.jquery.com/jquery-2.0.3.min.js"></script>         
    <!-- JQUERY MOBILE --> 
    <script src="//codeorigin.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script> 
</head> 
<body> 
    <div data-role="page" id="home"> 
     <div data-role="content"> 
      <p><a href="#menu-items" data-role="button" data-rel="popup" data-inline="true">Open Popup</a></p> 
      <p><a href="#menu-items" data-role="button" data-rel="dialog" data-transition="pop">Open Popup(dialog)</a></p> 
     </div> 
    </div> 
    <div id="menu-items" data-role="popup"> 
     <ul data-role="listview"> 
      <li><a href="http://www.google.com">google.com</a></li> 
      <li><a href="http://www.google.com">google.com</a></li> 
     </ul> 
    </div> 
</body> 
</html> 

risposta

7

In effetti è una piccola cosa che ti manca! =)

jQuery 1.3 Mobile Pop-up Docs:

... quindi creare un collegamento con l'href impostato l'id del div popup, e aggiungere l'attributo data-rel = "pop-up" a dire il quadro per aprire il popup quando viene toccato il collegamento. Questo è un modello di markup simile al widget di dialogo. Un popup pop deve essere nidificato all'interno della stessa pagina del collegamento.

Spostare il <div id="menu-items"></div> alla all'interno del nodo <div id="home" data-role="page"><div>, allora che dovrebbe essere!

Utilizzo jsFiddle incluso. Dialogs sono deprecati da jQuery Mobile 1.4.0 e saranno rimossi in 1.5.0.

3

Penso che ci siano due cose:

I). for opening a popup you have to place popup content inside the data-role='page' 

II). for opening a dialog you have to place dialog content outside the data-role='page' 

violino di lavoro: http://jsfiddle.net/REthD/10/