jQuery Mobile“弹出”div 没有隐藏？答案

【问题标题】：jQuery Mobile "popup" div is not hidden?jQuery Mobile“弹出”div 没有隐藏？
【发布时间】：2012-07-10 13:19:43
【问题描述】：

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

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

【问题讨论】：

弹窗初始化js代码在哪里？

标签： jquery jquery-mobile

【解决方案1】：

我认为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>

【讨论】：

这很奇怪，因为在我的文件的以前版本中一切正常......我还注意到 jQuery 的文档发生了变化......奇怪！我不能真正使用该对话框，因为它（由于某种原因）与我页面上的另一个元素（画布元素）发生冲突。
感谢您的建议，我将使用对话框并使用锚点而不是链接到文件，这应该可以完成工作并防止与我的画布发生冲突。
我不认为弹出窗口曾经是稳定版本的一部分。您的画布元素是否在对话框/弹出窗口中？我不确定为什么 JQM 会与您的画布发生冲突，我有一个带有画布元素的 JQM 应用程序，并且它工作正常，
我认为这个问题是一个有效的问题，并且不涉及使用data-rel="dialog" 打开的页面查看jquerymobile.com/demos/1.2.0/docs/pages/popup/popup-images.html，你有一个<div data-role="popup">，它不是它是自己的页面。在 Chrome 中，这个 div 被隐藏并且很好地弹出。在 Safari (iPhone) 中，div 没有隐藏。
@Marc 这个问题是指 jQuery Mobile 1.1，在 JQM 1.2（以及弹出窗口小部件）发布之前被问到。