JQuery mobile tool-tip popup(“close”) function is

Question

In my JQuery Mobile site I've added a tool-tip dialog box to open when the page is load and It'll disappear after 5sec. My code is similar to follows,

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

This update is working fine in all devices except in IPhone 5 iOS 6. Because when I tried to load my JQuery mobile page with above script in IPhone 5 iOS 6 device it redirect me to the previous page when the popup closing. I'm not sure what I've missed here but for me it looks like jQuery Mobile popup("close") function is not supporting for IPhone 5 iOS 6.

Also when the tool-tip load following hash tag text appending to the URL how can we avoid this #&ui-state=dialog

Could anyone please let me know how can we solve this issue ?

I've even tried following code also;

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

    });

But this is not working at all

Answer 1

Also alternatively..jquery mobile surrounds pop-ups with a div having ID = "yourpopupid-popup" So you can simply hide that div.

for example: < div id="basic" data-role="popup" > I am pop up< / div > , then you can close it by : $('#basic-popup').hide();

Answer 2

I have faced same problem in using popup for toolbar menu (jQuery Mobile 1.2). For example:

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

Above code doesn't work on iPhone 5 (but works on android, iPhone4 etc). If I change it as below it works.

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

Answer 3

Got it. Add data-history="false" to the 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

Answer 4

Use two functions hide() or you can use close() function on clicking the button