2013-08-17 21 views
5

Jestem pewien, że brakuje mi czegoś podstawowego, ale czy ktoś może zobaczyć cokolwiek złego w poniższym kodzie? Kiedy klikam pierwszy przycisk, nie otwiera się popup. Drugi przycisk otwiera popup jako okno dialogowe.Nie można uzyskać wyskakującego okienka do pracy w 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> 

Odpowiedz

7

Rzeczywiście jest to mała rzecz, której brakuje! =)

jQuery 1.3 Mobile Pop-up Docs:

... następnie utworzyć łącze z href ustawiony na id div podręcznego i dodać atrybut data-rel = „okienko”, aby powiedzieć ram do otwarcia popup po kliknięciu łącza. Jest to podobny wzór znaczników do widżetu okna dialogowego. Wyskakujący element div musi być zagnieżdżony na tej samej stronie, co łącze.

Przesuń <div id="menu-items"></div> do wewnątrz węzła <div id="home" data-role="page"><div>, to powinno być to!

Działająca jsFiddle w komplecie. Dialogs są przestarzałe od wersji jQuery Mobile 1.4.0 i zostaną usunięte w wersji 1.5.0.

3

Myślę, że są dwie rzeczy:

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' 

skrzypce pracy: http://jsfiddle.net/REthD/10/

Powiązane problemy