使用 jquery 移动弹出窗口
Posted
技术标签:
【中文标题】使用 jquery 移动弹出窗口【英文标题】：Working with the jquery mobile popups 【发布时间】：2012-06-03 17:35:28 【问题描述】：我正在使用 jquery mobile 构建一个 webapp。我想做一个基本的弹出窗口，如here 所示。
但它不工作，它还在屏幕上显示文本。 这是我的 html：
<div data-role="popup" id="basic" data-transition="pop">
<p>I am a default popup</p>
</div>
我是这样称呼它的。
if (zalen.length > 0)
$('#basic').popup();
else
$('#basic').popup();
有人可以帮忙吗？
【问题讨论】：
您的浏览器控制台是否出现任何错误？ 问题可能与css有关，你试过了吗：$( "#basic" ).popup( opened: function() alert('opened') );
【参考方案1】：
您没有正确遵循文档：
1) 打开弹出窗口的链接应具有data-rel="popup"和href="#somePopup"属性。
2) 弹出内容应具有data-role="popup" 属性以及您在href 属性中为链接指定的ID。 （id="somePopup" 用于包含弹出内容的元素）
3) 然后您可以按照您的建议以编程方式调用它，$("#somePopup").popup();
编辑： 除了已修复的这个问题，@SySammy 似乎是正确的；弹出窗口小部件仍在开发中，不在当前发布版本中。
【讨论】：
好的，但问题是，没有链接。当有事情发生时，它应该作为警报出现。 确实，所以跳过链接步骤 :) 您的弹出 DIV 属性错误 - 它应该有data-role="popup" 和相关 ID。
好的，现在我在 firebug 中遇到了这个错误 $("#basic").popup is not a function $('#basic').popup();
你确定你包含了所有相关的 JS 文件吗？它应该工作。如果您确实包含了所有必需的 JS，请发布您的代码并进行修复
对我来说它只适用于$("#somePopup").popup("open");而没有“打开”它只会被忽略【参考方案2】：
如果你有这样的事情：
<div data-role='page' id='page0'>
</div>
<div data-role='page' id='pag1'>
</div>
<div data-role='popup' id='pop1'>
</div>
它不起作用，弹出窗口必须在调用它的页面内。
<div data-role='page' id='page0'>
<div data-role='footer'></div>
<div data-role='popup' id='pop1'>
</div>
</div>
<div data-role='page' id='pag1'>
</div>
我不知道为什么会这样，但我遇到了这种问题，这就是问题所在。
【讨论】：
【参考方案3】：弹窗仍在开发中，您需要等到下一个版本或使用this plugin
【讨论】：
【参考方案4】：您是否确保按顺序包含 jquery 和 jquery-mobile 的 javascript。
<head>
<script src="js/jquery-1.9.0.min.js"></script>
<script src="jquery.mobile/jquery.mobile-1.3.0-beta.1.min.js"></script>
</head>
<body>
<div data-role="popup" id="basic" data-transition="pop">
<p>I am a default popup</p>
</div>
<div onclick="javascript:onSuccess();" >Open Popup</div>
<script type="text/javascript">
function onSuccess()
$('#basic').popup('open');
</script>
</body>
【讨论】：
你在脚本标签内添加html元素，建议是什么？ 对不起，我已经编辑了...参考这个link【参考方案5】：试试这个
<div data-rel="popup" id="basic" data-transition="pop">
<p>I am a default popup</p>
</div>
【讨论】：
【参考方案6】：在提出这个问题时，文档中没有说明弹出窗口的 HTML 代码必须在 <div data-role="page"> ... </div> 内。见：https://github.com/jquery/jquery-mobile/issues/4891
现在，如果您不想打扰这些概念并专注于弹出内容，请使用我的插件https://***.com/a/12092465/976827 - 我在另一个 jQuery mobile popup() 相关问题上推荐了这个。查看demo和代码，很容易上手。
演示和代码 https://github.com/serbanghita/jQM-dynamic-popup
【讨论】：
我只是好奇为什么这被否决了。自 jQM 1.2 alpha 以来，我在单页 Web 应用程序的生产环境中使用它以上是关于使用 jquery 移动弹出窗口的主要内容，如果未能解决你的问题，请参考以下文章
Jquery 移动弹出窗口未使用 requireJS 和backboneJS 触发
当设备的（android）键盘处于活动状态时，jquery 移动弹出窗口小部件不会移动