使用 jquery 移动弹出窗口答案

【问题标题】：Working with the jquery mobile popups使用 jquery 移动弹出窗口
【发布时间】：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') } });

标签： jquery html jquery-mobile popup

【解决方案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://stackoverflow.com/a/12092465/976827 - 我在另一个 jQuery mobile popup() 相关问题上推荐了这个。查看demo和代码，很容易上手。

演示和代码 https://github.com/serbanghita/jQM-dynamic-popup

【讨论】：

我只是好奇为什么这被否决了。自 jQM 1.2 alpha 以来，我在单页 Web 应用程序的生产环境中使用它