Menu
I was working with jQuery Mobile and hoping to use the popup method. Previously everything was working but when having to refactor my code something has gone wrong and now I've spent so long looking at this I really can't see the "wood for the trees". Thus in my application, I created a test page, removed all my JS and CSS and HTML from it and thus had a stark but clean page. I've even gone so far that I've added the JQuery examples and link to their hosted scripts in case there is a conflict due to my code... but still my problem remains... the DIV used for the popup isn't originally hidden and clicking on the buttons does nothing... I've really got myself worked up on this and I'm sure I've missed something really simple and obvious (perhaps I should go take a coffee for 15 mins)...
Here is the code
<!DOCTYPE HTML>
<html>
<head>
<title></title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
</head>
<body>
<a href="#basic" data-rel="popup" data-role="button">Default popup</a>
<div id="basic" data-role="popup" class="ui-content">
<p>I am a default popup</p>
</div>
<a href="#transitionExample" data-transition="none" data-role="button" data-inline="true" data-rel="popup">No transition</a>
<a href="#transitionExample" data-transition="pop" data-role="button" data-inline="true" data-rel="popup">Pop</a>
<a href="#transitionExample" data-transition="slideup" data-role="button" data-inline="true" data-rel="popup">Slide up</a>
<a href="#transitionExample" data-transition="slidedown" data-role="button" data-inline="true" data-rel="popup">Slide down</a>
<div id="transitionExample" data-role="popup" data-transition="flip">
<p>This is some text for the transition example</p>
</div>
</body>
</html>
and here is a screenshot in Firefox (it's the same when deploying to a test device)
What am I doing wrong... I can feel an emotional moment coming soon...
623
I don't think the popup widget has been officially released. Perhaps what you meant to use is a dialog?
If you want to use the popup dialog you will need to link to the correct version of JQM, in addition i don't think you need to place a class of ui-content on the div, from the docs
<a href="#popupBasic" data-rel="popup">Open Popup</a>
<div data-role="popup" id="popupBasic">
<p>This is a completely basic popup, no options set.<p>
</div>
If you mean to use it with a dialog then your markup is slightly off, your links/buttons should be in their own page and the dialogs in their own divs (i.e not nested in the page with the links).
Here's the fixed up markup
<div data-role="page">
<a href="#basic" data-rel="dialog" data-role="button">Default popup</a>
<a href="#transitionExample" data-transition="none" data-role="button" data-inline="true" data-rel="dialog">No transition</a>
<a href="#transitionExample" data-transition="pop" data-role="button" data-inline="true" data-rel="dialog">Pop</a>
<a href="#transitionExample" data-transition="slideup" data-role="button" data-inline="true" data-rel="dialog">Slide up</a>
<a href="#transitionExample" data-transition="slidedown" data-role="button" data-inline="true" data-rel="dialog">Slide down</a>
</div>
<div id="basic" data-role="dialog">
<div data-role="header"><h3></h3></div>
<div data-role="content" >
<p>I am a default popup</p>
</div>
</div>
<div id="transitionExample" data-role="dialog">
<div data-role="header"><h3></h3></div>
<div data-role="content">
<p>This is some text for the transition example</p>
</div>
</div>
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
