5

我正在使用 jQuery Mobile 并希望使用该popup方法。以前一切正常，但是当不得不重构我的代码时出现了问题，现在我花了很长时间看这个，我真的看不到“树木的木材”。因此，在我的应用程序中，我创建了一个测试页面，从中删除了我所有的 JS、CSS 和 HTML，从而得到了一个简洁但干净的页面。我什至已经添加了 JQuery 示例并链接到他们的托管脚本，以防我的代码出现冲突......但我的问题仍然存在......用于弹出窗口的 DIV 不是t 最初隐藏并单击按钮无济于事......我真的让自己努力解决这个问题，我确定我错过了一些非常简单和明显的东西（也许我应该去喝杯咖啡 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中的屏幕截图（部署到测试设备时相同）

在此处输入图像描述

我做错了什么...我能感觉到即将到来的情感时刻...

4

1 回答 1

1

我认为弹出小部件尚未正式发布。也许您打算使用的是一个对话框？

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

<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>
于 2012-07-10T13:29:27.890 回答