Menu
im using jquery mobile. im trying to create a popup. I found this simpel code that should work. http://jquerymobile.com/branches/popup-widget/docs/pages/popup/index.html
I tried the code in the example
<a href="#popupBasic" data-rel="popup">Tooltip</a>
<div data-role="popup" id="popupBasic">
This is a completely basic popup, no options set.
</div>
but when I put this in my own code the div will still display and when I click on the button it goes to an other page, instead of a popup. Can someone help me?
580
Well ... I've gotten it to work (sample code below, sorry for the muddled string I couldn't get it to display in the code blocks otherwise) ... but I'm wondering how YOU found this page?? This doesn't seem to be part of the latest jQuery Mobile release candidate ... so my guess is that it's not working for you because your JS and CSS references aren't pointing to the files that actually contain the corresponding code?
<!DOCTYPE html>
<html class="ui-mobile-rendering">
<head>
<meta charset="utf-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<title>JQM popup test</title>
<link rel="stylesheet"
href="http://jquerymobile.com/branches/popup-widget/css/themes/default/jquery.mobile.css"/>
<script src="http://jquerymobile.com/branches/popup-widget/js/jquery.js"></script>
<script src="http://jquerymobile.com/branches/popup-widget/js/"></script>
</head>
<body>
<a href="#popupBasic" data-rel="popup">Tooltip</a>
<div data-role="popup" id="popupBasic">This is a completely basic popup, no options set.</div>
<div>Other</div>
<div>Random</div>
<div>Text</div>
</body>
</html>
It seems popups are scheduled for 1.2 release (see this page on github). I think the "branches" in the url page indicates that this page is from the unreleased dev branch of jQuery mobile. If you look at the docs page for the 1.1 release, this feature is not documented.
It can be added to 1.0 by adding either the jquery.mobile.popup.js and css from the previous github link or use the web-ui-fw project which includes the popup widget and other widgets.
I use web-ui-fw to have popups with jQuery mobile 1.1; this plugin uses "popupwindow" instead of "popup" for the data-rel and data-role
4
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
