Question

我正在使用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();    
}

有人可以帮忙吗？

Answer 1

您没有正确遵循文档：

1）打开弹出窗口的链接应该包含属性data-rel="popup"和href="#somePopup"。

2）弹出式内容应具有属性data-role="popup"以及您在链接的href属性中指定的ID。（id="somePopup"表示包含弹出内容的元素

3）然后您可以按照您的建议$("#somePopup").popup();

以编程方式调用它

编辑：除了已解决的问题，似乎@SySammy是正确的;弹出窗口小部件仍在开发中，不在当前版本中。

Answer 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>

我不知道为什么会这样，但我遇到了这样的问题，这就是问题所在。

Answer 3

弹出窗口仍在开发中，您需要等到下一个版本或使用this plugin

Answer 4

您是否确保javascript有javascript，jquery-mobile包含在订单中。

<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>

Answer 5

试试这个

<div  data-rel="popup" id="basic" data-transition="pop">
          <p>I am a default popup</p>
</div>

Answer 6

在提出此问题时，文档中没有说明，弹出窗口的HTML代码必须位于<div data-role="page"> ... </div>内。请参阅：https://github.com/jquery/jquery-mobile/issues/4891

现在，如果你不想打扰这些概念并专注于你的弹出内容，请使用我的插件https://stackoverflow.com/a/12092465/976827 - 我在另一个jQuery mobile popup（）相关问题上推荐了这个。检查演示和代码，它很容易使用。

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

使用jquery移动弹出窗口

6 个答案: