jQuery Mobile弹出框关闭按钮 - 如何在不返回的情况下关闭？

Question

我正在使用jQuery Mobile 1.2.0中的新弹出对话框来显示一系列YouTube视频。以下是我正在使用的弹出示例：

http://jquerymobile.com/demos/1.2.0/docs/pages/popup/popup-iframes.html

注意地图示例...它是一个带关闭按钮的fancybox风格。我让我的视频弹出窗口也做了同样的事情。不同之处在于，额外的关闭链接被添加到弹出窗口中，像这样：

<a href="##" data-rel="back" data-role="button" data-theme="a" data-icon="delete" data-iconpos="notext" class="ui-btn-right">Close</a>

这是问题所在：打开一个视频并关闭后，再打开下一个视频并关闭，第一个视频会再次出现。我认为这是因为之前的视频在历史记录中处于“返回”位置，并且关闭框被实现为“返回”。是否有内置的方法将关闭框实现为真正的“关闭”，还是需要通过JavaScript来实现？

- Redtopia

---

似乎关闭弹出窗口（即使不使用关闭按钮 - 即在弹出窗口外轻敲）是通过返回来完成的。我不完全确定这一点...我只知道它在这一点上的行为方式。当我的最后一个页面视图有一个先前打开的弹出窗口时，该弹出窗口会再次打开。我的实现可能与正常略有不同 - 我使用相同的弹出窗口来显示所有视频...我只需在打开弹出窗口之前更改iframe的src属性：('#popupid').popup('open'); - Redtopia

这是我正在做的事情的基本内容：http://jsfiddle.net/zFete/2/ 我正在使用同一个弹出窗口来显示多个视频。昨天我试图发布一个 jsfiddle，但在 FF 和 Chrome 上运行时存在与 Flash 相关的问题。正如您在对您的 jsfiddle 进行修改时所看到的，您必须单击按钮两次才能显示弹出窗口，然后还有一些其他问题，这些问题显示在控制台中。实际使用此功能的开发站点位于主页下方的“团队”图标下的 http://ehealthmobile.redtopia.com。 - Redtopia

@Phil...只是想知道你有没有什么想法？我认为这可能与哈希有关，当打开弹出窗口时，哈希被添加到URL中。我想知道是否有一种方法可以在不添加哈希的情况下打开对话框...然后关闭它。我不想因为视频列表可能会变化而必须为每个视频创建单独的弹出窗口。我想我可以动态地为每个视频创建一个不同的弹出窗口。 - Redtopia

我认为问题在于您正在使用相同的弹出窗口，但更改URL以指向另一个视频。这是个好主意，但我不确定jQM团队是否考虑过这样做。我建议您提出一个问题，看看是否可以在jQM中取得进展，但也可以创建两个单独的弹出窗口来测试我的理论。 - Phill Pafford

我遇到了类似的问题，因为我正在使用弹出窗口显示错误消息，然后在3秒后关闭。有时关闭会导致主页面返回到上一个页面。在我看来，这里的弹出功能实现得很糟糕，因为这种行为根本不应该发生。 - Ian Devlin

@Ian，我支持你...希望这个星期能解决这个问题并保持此问题最新状态。我认为这与哈希和历史有关...如果您打开对话框后查看URL，它是否有一个哈希？然后看一下关闭按钮，您会发现它实际上是一个返回（至少在我的示例中是这样）。 - Redtopia

Answer 1

@Redtopia，感谢您的回复。我通过在弹出窗口上设置myPopup.popup({ history: false });选项解决了我的问题。然后一切都正常工作了。

- Ian Devlin

---

这不是问题所在... 在我的CMS模板中，我正在将弹出窗口插入页面。但由于jQuery Mobile有时会在DOM中缓存页面，因此有时我的弹出窗口（具有相同ID）存在于DOM中多次。我需要找出一种方法，在每个页面中包含一个具有唯一ID的弹出窗口，然后JavaScript将知道使用哪个ID。 - Redtopia

我终于让它全部运行起来了。我必须在使用弹出窗口的每个页面中注入一个弹出窗口...有点复杂，但很好用。我想我终于掌握了jquery mobile的工作原理。对于我的模板驱动站点，我现在避免使用DOM ID，因为当它们是模板的一部分时会产生重复。这让我很困扰！ - Redtopia

很高兴听到你已经解决了问题。这也是我使用jQuery Mobile时遇到的主要问题，我不理解所有东西的工作原理，也不知道最佳实践是什么，例如在pagecreate中应该做哪些事情，pagebeforeshow和pageshow呢？一些指南会很有帮助！ - Ian Devlin

这是正确的答案，但我想添加更多信息。这个解决方案对我有用。在我的情况下，我正在创建动态弹出窗口，所以当我在创建弹出窗口之后，在打开它之前使用myPopup.popup({ history: false });时，这个解决方案对我有用。 - Kulbhushan Chaskar

没问题！实际上我在 HTML 中加入了 data-history="false"。<div data-role="popup" data-history="false" id="myPopup"></div> - Rémi Santos