Geek asks and answers

JQuery Mobile "popup" div not hidden?

I worked with jQuery Mobile and was hoping to use a method popup. Everything used to work, but when I had to reorganize my code, something went wrong, and now I looked at it for so long, I really do not see a "tree for trees". Thus, in my application, I created a test page, deleted all my JS, CSS and HTML from it, and thus had a strict but clean page. I even went so far as to add JQuery examples and a link to their hosted scripts in case of a conflict because of my code ... but still my problem remains ... The DIV used for the popup is t hidden and clicks on the button does nothing ... I really did it, and I'm sure I missed something very simple and obvious (maybe I need to go for coffee in 15 minutes) ...

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>

Firefox ( )

enter image description here

... ...

+5
1

, . , dialog?

, JQM, , , ui-content div 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>

, , / div (.. ).

Here's the fixed 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>
+1
source

More articles:


All Articles