JQuery 移动工具提示弹出（“关闭”）功能在 iPhone 5 中不起作用

Posted 2023-05-09

【中文标题】JQuery 移动工具提示弹出（“关闭”）功能在 iPhone 5 中不起作用

【英文标题】：JQuery mobile tool-tip popup("close") function is not working in IPhone 5

【发布时间】：2013-02-07 05:03:24

【问题描述】：

在我的 JQuery Mobile 站点中，我添加了一个工具提示对话框，可在页面加载时打开，它会在 5 秒后消失。我的代码类似如下，

  <div data-role="popup" id="popupInfo">
     <p>This is a completely basic popup, no options set.<p>
  </div>

  <script type="text/javascript">
 $(document).live( 'pagechange',function(event)
     $('#popupInfo').popup("open")
      setTimeout(function() 
      $('#popupInfo').popup("close");
      , 5000);
  );
   </script>

此更新在除 iPhone 5 iOS 6 之外的所有设备上运行良好。因为当我尝试在 IPhone 5 iOS 6 设备中使用上述脚本加载我的 JQuery 移动页面时，它会在弹出窗口关闭时将我重定向到上一页。我不确定我在这里错过了什么，但对我来说，jQuery Mobile popup("close") 功能似乎不支持 IPhone 5 iOS 6。

此外，当工具提示加载以下附加到 URL 的哈希标记文本时，我们如何避免这种 #&ui-state=dialog

谁能告诉我如何解决这个问题？

我什至也尝试过以下代码；

 $(document).on('pagechange',function(event)
        $('#popupInfo').popup("open").delay(2000).popup("close");

    );

但这根本不起作用

【问题讨论】：

非常感谢您处理这种情况。我会尽快通知您。

【参考方案1】：

知道了。将data-history="false" 添加到popupBasic Popup div。

<!-- Button / works without it -->
<a href="#popupBasic" data-rel="popup">Open Popup</a>

<!-- Popup #popupBasic -->
<div data-role="popup" id="popupBasic" data-history="false">
<p>This is a completely basic popup.<p>
</div>

JS：

<script type="text/javascript">

 $(document).live( 'pagechange',function()
 $('#popupBasic').popup("open")
  setTimeout(function() 
  $('#popupBasic').popup("close");
  , 5000);
 );

</script>

JSfiddle：Popup

【讨论】：

感谢您，但问题仍然存在。请使用在线模拟器检查我的测试文件。测试链接：apartmentslanka.com/ztest_calender/zfr/index_a.html。在线模拟器链接：iphonetester.com

【参考方案2】：

另外，..jquery mobile 使用 ID = "yourpopupid-popup" 的 div 围绕弹出窗口 所以你可以简单地隐藏那个 div。

例如：

我弹出了 ，那么您可以通过以下方式关闭它： $('#basic-popup').hide();

【参考方案3】：

使用两个函数 hide() 或者您可以在单击按钮时使用 close() 函数

【参考方案4】：

我在使用弹出工具栏菜单（jQuery Mobile 1.2）时遇到了同样的问题。例如：

<a href="#popupBasic" data-rel="popup">Open Popup</a>

<!-- Popup #popupBasic -->
<div data-role="popup" id="popupBasic" data-history="false">
<ul data-role="listview" data-inset="true">
<li><a href='item1.html'>Item1</a></li>
</ul>
</div>

以上代码不适用于 iPhone 5（但适用于 android、iPhone4 等）。如果我按如下方式更改它，它就可以工作。

<a data-ajax="false" href='item1.html'>Item1</a>