2013-08-17 8 views
5

Ich bin sicher, ich vermisse nur etwas Grundlegendes, aber kann jemand etwas falsch mit dem folgenden Code sehen? Wenn ich auf die erste Schaltfläche klicke, öffnet sich kein Popup. Die zweite Schaltfläche öffnet das Popup als Dialog.Kann nicht ein Popup in jQuery Mobile arbeiten

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

Antwort

7

In der Tat ist es eine kleine Sache, die Sie vermissen! =)

jQuery 1.3 Mobile Pop-up Docs:

... dann eine Verbindung mit dem auf die ID des Popup div gesetzt href erstellen, und fügen Sie das Attributdaten-rel = "Pop-up", um den Rahmen zu sagen, zu öffnen das Popup, wenn der Link angetippt wird. Dies ist ein ähnliches Markup-Muster wie das Dialog-Widget. Ein Popup-Div muss auf der gleichen Seite wie der Link verschachtelt werden.

die <div id="menu-items"></div> innerhalb des <div id="home" data-role="page"><div> Knoten verschieben

, sein dann sollte es!

Arbeiten jsFiddle enthalten. Dialogs sind seit jQuery Mobile 1.4.0 veraltet und werden in 1.5.0 entfernt.

3

Ich denke, es gibt zwei Dinge:

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' 

Arbeits Geige: http://jsfiddle.net/REthD/10/

Verwandte Themen