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>

回答1:

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

回答2:

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/

来源：https://stackoverflow.com/questions/13154278/in-jquery-mobile-why-doesnt-this-popup-close

标签

jquery

jquery-mobile