jquery mobile 弹出关闭按钮 - 如何关闭而不返回？

Posted 2023-05-09

【中文标题】jquery mobile 弹出关闭按钮 - 如何关闭而不返回？

【英文标题】：jquery mobile popup close button - how to close without going back?

【发布时间】：2012-10-08 08:15:12

【问题描述】：

我正在使用 jquery mobile 1.2.0 中的新弹出对话框来显示一堆 youtube 视频。以下是我正在使用的弹出示例：

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

请注意地图示例...这是一种带有关闭按钮的精美盒子样式。我已经让我的视频弹出窗口做同样的事情。不同之处在于额外的关闭链接，像这样添加到弹出窗口中：

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

问题是：打开一个视频然后关闭它，然后打开下一个视频并关闭它，第一个视频又出现了。我想是因为上一个视频是历史中“后退”的位置，而关闭框实现为“后退”。

是否有一种内置方法可以将关闭框实现为真正的“关闭”，还是我需要通过 javascript 来实现？

【问题讨论】：

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

这就是我正在做的事情：jsfiddle.net/zFete/2 我正在使用同一个弹出窗口来显示多个视频。我昨天试图发布一个 jsfiddle，但是在 FF 和 Chrome 上运行它时存在问题，这与 Flash 有关。正如您将在我的 jsfiddle 模组中看到的那样，您必须单击 2x 按钮才能显示弹出窗口，然后还有一些其他问题，这些问题会显示在控制台中。实际使用它的开发站点位于：ehealthmobile.redtopia.com 在主页的“团队”图标下。

@Phil... 只是想知道您是否有任何想法？我认为这可能与打开弹出窗口时添加到 URL 的哈希有关。我想知道是否有办法在不添加哈希的情况下打开对话框......然后关闭它。我不想为每个视频创建单独的弹出窗口，因为视频列表可能会有所不同。我想我可以为每个视频动态创建不同的弹出窗口。

我认为问题在于您使用的是相同的弹出窗口，但将网址更改为指向另一个视频。好主意，但我不确定 jQM 团队是如何考虑这样做的。我会提出一个问题，看看你是否可以使用 jQM 获得任何好处，但也可能创建两个单独的弹出窗口来测试我的理论

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

【参考方案1】：

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

【讨论】：

我目前无法尝试此操作...当我弄清楚问题时，我会回到这个线程。我的问题是我有一个要用于多个页面的弹出窗口，有时，根据 URL，同一页面加载两次，给我两个（或更多）同一个对话框。在尝试您的解决方案之前，我需要想办法解决这个问题。

在打开对话框之前，你不能先检查一下它是否已经可见，如果是，就不要打开它吗？

这不是问题...在我的 CMS 模板中，我将弹出窗口插入到页面中。但是因为 jquery mobile 有时会在 DOM 中缓存页面，所以有时我的弹出窗口（具有相同的 ID）在 DOM 中存在多次。我需要想办法在每个页面中包含一个带有唯一 ID 的弹出窗口，然后 javascript 就会知道要使用哪个 ID。

我终于搞定了。我不得不在每个使用一个弹出窗口的页面中注入一个......有点复杂，但它工作得很好。我想我终于掌握了 jquery mobile 的工作原理。对于我的模板驱动网站，我现在避免使用 DOM ID，因为当它们是模板的一部分时，您最终会得到重复。这让我很困惑！

为我工作！实际上我在 HTML 中添加了data-history="false" --> <div data-role="popup" data-history="false" id="myPopup"></div>