Menu
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>
634
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.
116
i think there are two things:
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'
working fiddle : http://jsfiddle.net/REthD/10/
38
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
