Cannot get a popup to work in jQuery Mobile
html, javascript, jquery, mobile
Solution
Indeed it's a small thing you're missing! =)
jQuery 1.3 Mobile Pop-up Docs:
...then create a link with the href set to the id of the popup div, and add the attribute data-rel="popup" to tell the framework to open the popup when the link is tapped. This is a similar markup pattern to the dialog widget. A popup div has to be nested inside the same page as the link.
Move the `<div id="menu-items"></div>` to within the `<div id="home" data-role="page"><div>` node, then that should be it!
Working jsFiddle included. Dialogs are deprecated as of jQuery Mobile 1.4.0 and will be removed in 1.5.0.
Problem
I am sure I am just missing something basic, but can anyone see anything wrong with the following code? When I click the first button, it does not open a popup. The second button opens the popup as a dialog. ``` <!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> ```