jQuery Mobile "popup"div 没有隐藏

我正在使用 jQuery Mobile，希望使用 popup 方法。以前一切正常，但当不得不重构我的代码时出现了问题，现在我花了很长时间看这个，我真的看不到“树木为木”。因此，在我的应用程序中，我创建了一个测试页面，从中删除了所有 JS、CSS 和 HTML，从而得到了一个鲜明但干净的页面。我什至已经添加了 JQuery 示例并链接到其托管脚本，以防因我的代码而发生冲突...但我的问题仍然存在...用于弹出窗口的 DIV 不是'最初是隐藏的，点击按钮没有任何作用...我真的很努力地解决这个问题，我确信我错过了一些非常简单和明显的东西(也许我应该去喝 15 分钟的咖啡)。 ..

这是代码

<!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 中的屏幕截图(部署到测试设备时是一样的)

我做错了什么...我能感觉到激动人心的时刻即将到来...

请您参考如下方法:

我不认为 popup widget已正式发布。也许您想要使用的是 dialog ？

如果您想使用弹出对话框，您将需要链接到正确版本的 JQM，此外我认为您不需要在 div 上放置一个 ui-content 类，来自文档

<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 中(即不嵌套在带有链接的页面中)。

这是固定的标记

<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>