CODEWITHSUNDEEP
jqueryjquery-mobile
fakeguybrushthreepwood
fakeguybrushthreepwood

Reputation: 3083

In jQuery Mobile, why doesn't this popup close?

I am calling close as per http://jquerymobile.com/test/docs/pages/popup/index.html, but nothing is happening (obviously I expect it not to show at all in this situation):

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html> 
<head> 
    <title>popup</title> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset= ISO-8859-5">
    <script>
    $(document).ready(function () {
        $("#popupBasic").popup();
        $("#popupBasic").popup("open");
        $("#popupBasic").popup("close");
    });
    </script>
</head> 
<body> 

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

</div>

</body>
</html>

Upvotes: 2

Views: 3520

Answers (2)

ddd2602
ddd2602

Reputation: 3

I have had the same problem. I had a navigate event with alert in my code, and alert was indicating that navigate event is called after popup in chrome, and because jQM is not writing page with popup into history you are going back to first welcome page of chrome.

I have not resolved this problem, so I have used this plugin:

Magnific Popup v0.9.4 by Dmitry Semenov

Popup was opened directly via API in my jQM "pageshow" event. Here is the page: http://kancelaria.danekilian2.pl/

Upvotes: 0

Taifun
Taifun

Reputation: 6293

put your script into the body and it works, I added additionally a header

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
    <title>popup</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
    <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
    <meta http-equiv="Content-Type" content="text/html; charset= ISO-8859-5">
</head>
<body>

  <div data-role="page" id="myPage">
    <div data-role="content">
      <h1>Popup</h1>
      <div data-role="popup" id="popupBasic">
        <p>This is a completely basic popup, no options set.</p>
      </div>
    </div>

    <script>
      $(document).bind('pageinit', function() {
        setTimeout(function(){
          $("#popupBasic").popup();
          $("#popupBasic").popup("open");
          $("#popupBasic").popup("close");
        }, 100);
      });
    </script>
  </div>

</body>
</html>

EDIT: use $(document).bind('pageinit') instead of $(document).ready() as described here and now added a short delay of 100ms. Works now in Firefox Nightly and Chrome...

Upvotes: 2

Related Questions