Question

我正在使用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中的截图（在部署到测试设备时也是如此）

enter image description here

我做错了什么......我很快就会感受到一种情绪化的时刻......

Answer 1

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

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

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

jQuery Mobile“popup”div是不是隐藏了？

1 个答案: